jquery finde das nächste frühere Geschwister mit Klasse

146

Hier ist das grobe HTML, mit dem ich arbeiten kann:

<li class="par_cat"></li>
<li class="sub_cat"></li>
<li class="sub_cat"></li>
<li class="par_cat"></li> // this is the single element I need to select
<li class="sub_cat"></li>
<li class="sub_cat"></li>
<li class="sub_cat current_sub"></li> // this is where I need to start searching
<li class="par_cat"></li>
<li class="sub_cat"></li>
<li class="par_cat"></li>

Ich muss von der durchqueren .current_sub, die nächstgelegene finden .par_catund Sachen damit machen.

.find("li.par_cat")Gibt die gesamte Ladung von zurück .par_cat(ich habe ungefähr 30 auf der Seite). Ich muss das einzelne Ziel haben.

Würde mich über Tipps wirklich freuen :)

jquery html traversal tree-traversal daulex
quelle
7
Wow, Katzen sind wirklich überall im Internet! Jetzt haben wir auch Par- und Subkatzen.
JD Smith

Antworten:

257

Versuchen:

$('li.current_sub').prevAll("li.par_cat:first");

Getestet mit deinem Markup:

$('li.current_sub').prevAll("li.par_cat:first").text("woohoo");

füllt den nächsten Vorgänger li.par_catmit "woohoo".

karim79
quelle
Danke Karim. Dies funktionierte auch gut, aber ich gehe davon aus, dass .prev () weniger Ressourcen verbrauchen würde, da .prevAll ALLE zuvor übereinstimmenden Elemente abrufen und dann das benötigte filtern würde. Akzeptiere Eds Antwort.
Daulex
3
Tatsächlich schlug die .prev () nach ein wenig SMS in einigen Fällen fehl. .prevAll with: zuerst jedes Mal gearbeitet. Danke dir.
Daulex
1
.prev () prüft nur das unmittelbar vorhergehende Element. Ich habe den Kommentar zur Antwort unten zusammen mit dem Beispiel jsFiddle hinzugefügt. Nachdem Sie sich umgesehen haben, ist dies die beste Antwort, da zwar alle Elemente durchlaufen werden müssen, jedoch nicht zwei Funktionen erforderlich sind, um alle zu erfassen und dann zu filtern, um sie zu finden.
David Hobs
8
Bedeutet dies, dass :firstan einer Liste der zurückgegebenen Elemente gearbeitet wird, die dem ausgewählten Objekt am nächsten beginnt (im Gegensatz zu von oben nach unten relativ zur Seite)?
NReilingh
2
Vielen Dank für die sehr nützliche Antwort. Kannst du bitte die @ NReilingh-Frage beantworten, weil sie mich wirklich verwirrt? Hat nicht :firstein CSS-Selektor, der das erste Element im DOM auswählt (z. B. div.red:firstden ersten roten DIV im DOM auswählt ), jQuery den Selektor anders analysiert?
Buchhalter م
17

Versuchen 

$('li.current_sub').prev('.par_cat').[do stuff];

Ed James
quelle
19
Warte was? Überprüft dies nicht nur das unmittelbar vorhergehende Element? Ihr Code würde also null zurückgeben? - Hier ist es auf jsFiddle getestet: jsfiddle.net/Y2TEH
David Hobs
4
@ DavidHobs Ich habe das vor zwei Jahren geschrieben ... Ich würde heutzutage sicherlich prevAll () verwenden.
Ed James
8
@EdWoodcock In diesem Fall sollten Sie Ihre Antwort aktualisieren.
Hugo Zink
14

Mit prevUntil () können wir ein entferntes Geschwister bekommen, ohne alles bekommen zu müssen. Ich hatte einen besonders langen Satz, der mit prevAll () zu CPU-intensiv war.

var category = $('li.current_sub').prev('li.par_cat');
if (category.length == 0){
  category = $('li.current_sub').prevUntil('li.par_cat').last().prev();
}
category.show();

Dies erhält das erste vorhergehende Geschwister, wenn es übereinstimmt, andernfalls erhält es das Geschwister vor dem übereinstimmenden, sodass wir einfach ein weiteres mit prev () sichern, um das gewünschte Element zu erhalten.

eprothro
quelle
5

Ich denke, allen Antworten fehlt etwas. Ich bevorzuge so etwas

$('li.current_sub').prevUntil("li.par_cat").prev();

Spart Ihnen das Hinzufügen nicht: zuerst im Selektor und ist leichter zu lesen und zu verstehen. Die prevUntil () -Methode bietet ebenfalls eine bessere Leistung als die Verwendung von prevAll ()

Tom McDonough
quelle
0

Sie können diesem Code folgen:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".add").on("click", function () {
            var v = $(this).closest(".division").find("input[name='roll']").val();
            alert(v);
        });
    });
</script>
<?php

for ($i = 1; $i <= 5; $i++) {
    echo'<div class = "division">'
        . '<form method="POST" action="">'
        . '<p><input type="number" name="roll" placeholder="Enter Roll"></p>'
        . '<p><input type="button" class="add" name = "submit" value = "Click"></p>'
        . '</form></div>';
}
?>

Daraus können Sie sich ein Bild machen.

AL MaMun
quelle