2013-05-23 16 views
8

http://jsfiddle.net/3Bvt9/3/jQuery kann nicht .closest(), um die Suche auf DOM-Baum

HTML

<div id="div1"> 
    <img class="size" src=""> 
    <input name="rdo" id="rdo" type="radio" value="1"> 
    <div id="div2"> 
     <label>radiobutton</label> 
     <div id="div3"> 
      <a href="javascript:void(0)">link</a> 
      <input name="abc" id="abc" type="hidden" value="1"> 
     </div> 
    </div> 
</div> 

jquery

$('#abc').parent().parent().parent().find("input[type='radio']").length; //1 
$('#abc').closest("input[type='radio']").length; //0 why? 

Warum funktioniert die nächste Abfrage Arbeit? Ich dachte, engste() durchläuft seine Vorfahren im DOM-Baum.

+7

_I dachte am nächsten() durchläuft in dem DOM durch seine Vorfahren bis tree._ Ja, aber ein Eingang kann kein übergeordnetes Element sein. – undefined

+0

Die Dokumentation lautet: "Ermitteln Sie für jedes Element in der Gruppe das erste Element, das mit dem Selektor übereinstimmt, indem Sie das Element selbst testen und durch seine Vorfahren in der DOM-Struktur navigieren." Würde dieser Selektor nicht mit dem ersten gefundenen Radioeingang übereinstimmen? Welche sind gültige Eltern? Kann .closes() nur diese Typen finden? – duyn9uyen

+1

Was ist los mit den Schlussabstimmen btw? Es ist eine echte Frage "Warum funktioniert das nicht" mit einer offensichtlichen Antwort. –

Antwort

13

Dies ist, weil input[type="radio"] kein Elternteil von #abc ist, eher ist es ein Geschwister des Großelternelements.

Auch according to w3c können <input> Elemente untergeordneten Elemente nicht, im Gegensatz zu <button>, das heißt es "wrap" nicht um #abc.

Die erste Methode funktioniert, weil $('#abc').parent().parent().parent() nach oben zeigt <div>; tun .find("input[type='radio']") auf das wird der Radio-Button als Kind Element finden.

Dies würde auch:

$('#abc').parent().parent().siblings('input[type="radio"]).length; // 1 
+0

Wenn ich nur die ID #abc hätte, welche Methode kann ich verwenden, um den nächsten Radioknopf zu finden, der das DOM hochfährt? Gibt es einen besseren Weg als die Verwendung mehrerer .parent() Methoden? – duyn9uyen

+0

@ duyn9uyen Du könntest dem Großelternelement einen Klassennamen geben, nehme ich an, aber es wird immer den etwas peinlichen Code "Finde Geschwister aus Großeltern" geben. –

+0

Wird .closes() nur direkte Eltern finden? Also wird es in diesem Fall nur die drei Divs finden? – duyn9uyen