So finden Sie das nächste element, welches ein ID-Attribut mit jQuery

Wenn ich auf einen link klicken, ich muss die nächsten <section> mit einem ID-Attribut und gibt die ID.

So gegeben, das folgende markup und javascript, würde ich erwarten, dass ein Klick auf den link zu schreiben "section_3" auf der Konsole.

<section id="section_1">
    <a href="#" class="findNext">Find</a>
</section>
<section></section>
<section id="section_3"></section>
<section id="section_4"></section>

und

$('a.findNext').click(function() {
    var nextSectionWithId = $(this).closest("section").next("section[id]");
    if (nextSectionWithId) {
        var sectionId = nextSectionWithId.attr('id');
        console.log(sectionId)
    }
});

Aber das funktioniert nicht. Ich habe der code hier oben in jsFiddle.

Irgendwelche Ideen, warum dies nicht funktioniert?

.als Nächstes durchsucht nicht über alle folgenden Geschwister, es sehe nur auf den unmittelbaren nächsten. es ist in den api-docs.
Wenn ein Selektor vorgesehen ist, es ruft das nächste Geschwister nur, wenn Sie mit diesen Selektor. Ihre nächste Abschnitt nicht mit einer id.
So hervorragend, dass ich offensichtlich falsch interpretiert es im Sinne von "der nächste match-Kriterien" nicht "der nächste, wenn es die Kriterien erfüllt".
Du bist nicht der erste, bei weitem aus, dass er diese Annahme.

InformationsquelleAutor Digbyswift | 2013-10-24

  1. 5

    Versuchen :

    var nextSectionWithId = $(this).closest("section").nextAll("section[id]:first");

    oder

    var nextSectionWithId = $(this).closest("section").nextAll("section[id]").filter(':first');

    Fiddle

    Verwenden Sie können nicht weiter, weil die nächste Aussehen wird, für die eine übereinstimmung nur in das nächste element. So können Sie stattdessen verwenden nextAll kombiniert mit :erste in der Auswahl.

    Update

    Können Sie die ersten() Methode in jquery zu Holen, das erste element in der Sammlung als auch das scheint wie eine schnellere option.

    var nextSectionWithId = $(this).closest("section").nextAll("section[id]").first();

    Wahrscheinlich könnte dies sein Grund:

    Weil :Erstens ist eine jQuery-Erweiterung und nicht Teil der CSS-Spezifikation Abfragen mit :ersten kann nicht die Vorteile der performance-Schub, bereitgestellt durch die native DOM querySelectorAll () - Methode. Die beste Leistung erreichen, wenn Sie verwenden :Erstens, um Elemente auszuwählen, markieren Sie zunächst die Elemente, die mit einem reinen CSS-Selektor, dann verwenden .filter(":first").

    Coutesy @T. J. Crowder

    Sie es gefunden? Ist das nicht deine Frage 🙂 Gut zu wissen!!
    Ja, ist es. 🙂 Ich meinte "ich fand", wie in "ich habe gelernt" (in diesem Fall von Nick [Experimente]).
    Ja, wahrscheinlich lassen Sie mich hinzufügen, dass, als nun... die Antwort... 🙂 Danke!!

    InformationsquelleAutor PSL

  2. 2

    Verwenden .nextAll()

    DEMO

    var nextSectionWithId = $(this).closest("section").nextAll("section[id]")[0].id;

    DEMO

    var nextSectionWithId = $(this).closest("section").nextAll("section[id]").eq(0).attr('id');

    DEMO

    var nextSectionWithId = $(this).closest("section").nextAll("section[id]").attr('id');
    warum nach unten gestimmt, prüfen DEMO.
    überprüfen Sie aktualisierte Antwort .
    Natürlich, die aktualisierte Antwort wird eine exception werfen wenn es nicht alle folgenden Geschwister mit ids, in der Erwägung, dass .nextAll("section[id]").attr("id") zurück id des ersten Geschwister (falls vorhanden) oder undefined wenn keine, vielmehr als das werfen. Es ist eines der wenigen Anwendungsfälle, in denen mit .attr("id") können tatsächlich Sinn macht (im Gegensatz zu den gemeinsamen horror $(this).attr("id") sieht man viel zu oft 🙂 ).
    Es gibt null Grund für die Verwendung .eq(0) wenn Sie attr wie eine get. Wenn attr (oder prop oder css oder text oder html, ...) wird als get, es sieht immer nur auf das erste element in der Gruppe. Ich weiß nicht, was die Antwort ursprünglich ausgesehen hat, aber wenn jemand downvoted es zu tun .nextAll(...).attr("id") war das Ihr schlecht, nicht deins.
    Aber beachten Sie, dass die OP nicht sagen, Sie wollte die Wert der id. Sie sagten, Sie wollten zu finden, die Abschnitt (für mich bedeutet das element, nicht die id Wert). So .nextAll("section[id]").first() oder .nextAll("section[id]:first') wie in der PSL Antwort.

    InformationsquelleAutor Tushar Gupta - curioustushar

Schreibe einen Kommentar