Wie erhalten Sie alle Abkömmlinge eines DOM-Elements, die eine Klasse definiert haben?

Question

Ich bin ziemlich neu zu jQuery und Javascript im Allgemeinen, und ich suche, nur die DOM-Elemente zurückzugeben, die eine Klasse definiert haben. Zum Beispiel:

<div id="myObject"> 
    <h2>hello world</h2> 
    <div class="foo">bar</div> 
    <div class="bar">foo</div> 
    <div></div><a href="http://google.com"></a> 
</div> 

Ich frage mich, ob es eine jQuery-Funktion oder ein cleverer Suchparameter existiere ich $(#myObject).find(...) passieren kann, der zurückkehren würde nur .foo und .bar, da dies die einzigen zwei DOM-Elemente sind, die eine Klasse definiert. Verallgemeinern, wäre es auch möglich, nach dem Vorhandensein eines Attributs zu suchen?

Es scheint, dass ich dies mit einer komplexeren Reihe von Funktionsaufrufen tun, wie

var toReturn = []; 
var descendants = $('#myObject').find('*'); 
$.map(descendants, function (element, index) { 
    if(element.getAttribute('class') != undefined){ 
     toReturn.push(element); 
    } 
}); 

Aber wenn es etwas einfacher ist, wäre es hilfreich, darüber zu wissen.

Answer 1

Verwenden Sie $('#myObject [class]:not([class=""])'). Es werden alle Nachkommen von #myObject ausgewählt, für die eine Klasse definiert wurde, und es werden Elemente ausgeschlossen, für die eine Klasse entfernt wurde. (Danke für die not Syntax @TravisJ!)

Snippet:

$('.byebye').removeClass('byebye'); 
 

 
$('#myObject [class]:not([class=""])').addClass('selected');

.selected { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myObject"> 
 
    <h2>hello world</h2> 
 
    <div class="foo">bar</div> 
 
    <div class="bar">foo</div> 
 
    <div class="byebye"> 
 
    class removed 
 
    </div> 
 
    <div> 
 
    no class here 
 
    </div> 
 
    <a href="http://google.com">none here either</a> 
 
</div>