JQuery-Selektor

Question

Bei der folgenden ungeordneten Liste wird der JQuery-Selektor $("#root #2") wählt:

/ul/li/ul[@id='root']/li/ul[@id='1']/li/ul[@id='2']

Ich hätte jedoch erwartet, dass sie den kürzeren Weg wählt:

/ul/li/ul[@id='root']/li/ul[@id='2']

Hat jemand eine Idee?

<ul>
    <li>root
        <ul id="root">
            <li>1
                <ul id="1">
                    <li>2
                        <ul id="2"> <!--*selecting this*-->
                            <li>3<ul id="3"></ul></li>          
                            <li>4<ul id="4"></ul></li>
                        </ul>
                    </li>
                    <li>3<ul id="3"></ul></li>
                </ul>   
            <li>2
                <ul id="2"> <!-- *expecting this* -->                   
                    <li>3
                        <ul id="3"> 
                            <li>4<ul id="4"></ul></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>3<ul id="3"></ul></li>
            <li>4<ul id="4"></ul></li>
        </ul>
    </li>
</ul>

Answer 1

Es gibt zwei Gründe, warum das Verhalten undefiniert sein kann bzw. nicht dem entspricht, was Sie erwarten:

1. Es wird erwartet, dass die IDs eindeutig sind und dass der erhaltene Pfad dem gewünschten Pfad in der Quelle vorausgeht.
2. (in dieser Situation weniger wahrscheinlich) IDs sind voraussichtlich mit einem Buchstaben beginnen

Answer 2

Die Verwendung eines Leerzeichens in einem Selektor wählt jeden Vorgänger aus. Meine Vermutung ist, dass, da die li mit id=2 kommt vor der ul mit id=2 im DOM, jQuery stoppt an, dass (seit id's erwartet werden, um eindeutig sein).

Ich hoffe, das ist kein echtes HTML... denn die IDs sollten wirklich eindeutig sein.

Answer 3

Sie verwenden einen descendant-Operator, der alle Nachkommen durchsucht. Ich kann mir vorstellen, dass jQuery beim Durchsuchen des DOM-Baums den Suchalgorithmus depth first verwendet. Das erklärt, warum Sie den längsten Eintrag zuerst erhalten. Warum jQuery nur einen Knoten zurückgibt, ist, dass Sie den ID-Selektor verwenden, der in allen DOM-Knoten eindeutig sein soll. Ich würde erwarten, dass jQuery nach der ersten Übereinstimmung zurückkehren, da es keinen Sinn macht, den Rest des Baums zu durchlaufen.

Answer 4

Dieser Selektor sollte jedes Element mit einer ID von 2 zurückgeben, das ein Nachkomme eines Elements mit einer ID von Root ist, in DOM-Reihenfolge. Ich würde erwarten, dass er beide Elemente zurückgibt, die Sie in Ihrer Frage erwähnt haben. Das tiefer liegende Element steht an erster Stelle, weil es das erste im Dokument ist.

Beachten Sie, dass die IDs eindeutig sein sollten. Es ist ein Fehler, zwei Elemente mit einer ID von 2 zu haben.