it-swarm.com.de

jquery: Kinder () vs. Kinderauswahl ">"

Ich habe eine Tabelle mit einem Abschnitt ähnlich dem folgenden:

<tr>
    <td> <span class="myclass"></span>
    </td>
<tr>

mein $ (this) ist auf das Element tr gesetzt, und ich versuche, auf die Span-Elemente zuzugreifen, für die die Klasse "myclass" festgelegt ist. __ Folgendes scheint zu funktionieren:

if ($(this).children('td').children('span').is('.myclass')){
    alert('in here');
}

aber wenn Sie versuchen, dies zu verwenden:

if ($(this).children("td > span").is('.myclass')){

oder dieses:

if ($(this).children("td span").is('.myclass')){

Es tut nicht. Ich dachte, dass beide der oben genannten 2 zu ähnlichen Ergebnissen kommen würden (wenn auch mit unterschiedlichen Methoden), aber anscheinend nicht.

Was fehlt mir hier?

Vielen Dank!

18
user417918

children(selector) passt nur zu den Kindern, die selector entsprechen. Keines der Kinder von tr (die tds) kann mit td > span übereinstimmen, da tr keine span untergeordneten Elemente hat, nur tds und td > span !== td.

Die Dokumentation ist auch darüber klar:

Holen Sie sich die untergeordneten Elemente jedes Elements in der Menge der übereinstimmenden Elemente, die optional durch einen Selektor gefiltert werden.


Was Sie stattdessen möchten, ist .find() :

$(this).find("td > span")

Es gibt alle Nachkommen zurück, nicht nur Kinder, die dem Selektor entsprechen. 

19
Felix Kling

Aus den jQuery-Dokumenten:

"Die Methoden .find () und .children () sind ähnlich, außer dass diese nur eine Ebene durch den DOM-Baum bewegt."

Ich würde empfehlen, dies zu verwenden:

if ($(this).find('.myclass').length){
    alert('in here');
}

Prost

1
Kevin Ennis

Das habe ich hier erklärt.

Der Unterschied besteht darin, dass sich der erste Selektor vollständig innerhalb des Aufrufs von children befindet, während der zweite nicht vorhanden ist.

Daher sucht die erste nach allen Kindern von this, die ebenfalls mit td > span übereinstimmen. (Mit anderen Worten, alle {<span>s Kinder von <td>s } (der Selektor), die selbst direkt Kinder von this sind.

Der zweite findet alle <td>-Kinder von this und dann alle <span>s in diesen <td>s.

0
SLaks