Wie kann ich mit jQuery das nächste vorherige Geschwister mit der Klasse finden?

Lesezeit: 4 Minuten

Benutzeravatar von daulex
daulex

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_subfinden Sie die nächste vorherige .par_cat und Sachen damit machen.

.find("li.par_cat") gibt die ganze Ladung zurück .par_cat (Ich habe ungefähr 30 auf der Seite). Ich muss auf den einzigen zielen.

Benutzeravatar von karim79
karim79

Versuchen:

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

Getestet mit Ihrem Markup:

$('li.current_sub').prevAll("li.par_cat:first").text("woohoo");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="par_cat"></li>
  <li class="sub_cat"></li>
  <li class="sub_cat"></li>
  <li class="par_cat">// this is the single element I need to select</li>
  <li class="sub_cat"></li>
  <li class="sub_cat"></li>
  <li class="sub_cat current_sub">// this is where I need to start searching</li>
  <li class="par_cat"></li>
  <li class="sub_cat"></li>
  <li class="par_cat"></li>
</ul>

füllt die nächste vorherige auf li.par_cat mit “woohoo”.

  • Tatsächlich ist nach ein wenig Texten die .prev() in einigen Fällen fehlgeschlagen. .prevAll mit :first, hat jedes Mal funktioniert. Vielen Dank.

    – daulex

    22. Februar 2010 um 11:13 Uhr

  • .prev() überprüft nur das unmittelbar vorhergehende Element. Ich habe den Kommentar zur Antwort unten zusammen mit dem jsFiddle-Beispiel hinzugefügt. Nachdem Sie sich umgesehen haben, ist dies die beste Antwort, denn obwohl alle Elemente durchlaufen werden müssen, sind keine zwei Funktionen erforderlich, um alle zu erfassen und dann zu filtern, um sie zu finden.

    – David Koch

    27. Juni 2012 um 15:09 Uhr

  • Heißt das :first arbeitet an einer Liste zurückgegebener Elemente, die am nächsten zum ausgewählten Objekt beginnt (im Gegensatz zu von oben nach unten relativ zur Seite)?

    – NReilingh

    10. März 2013 um 0:41 Uhr

  • Vielen Dank für die sehr nützliche Antwort. Können Sie bitte die @NReilingh-Frage beantworten, weil sie mich wirklich verwirrt. Ist nicht :first ein CSS-Selektor, der das erste Element in auswählt Dom (z.B div.red:first wählt das erste rote DIV in der aus Dom) hat jQuery den Selektor anders analysiert?

    – Buchhalter م

    26. Juli 2017 um 10:19 Uhr

  • @Accountantم Es wird kein CSS-Selektor aufgerufen :first.

    – TylerH

    22. Oktober 2020 um 16:06 Uhr

Benutzeravatar von Ed James
Ed James

Versuchen

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

  • Warte was? Prüft dies nicht nur das unmittelbar vorhergehende Element? Ihr Code würde also null zurückgeben? – Hier wird es auf jsFiddle getestet: jsfiddle.net/Y2TEH

    – David Koch

    27. Juni 2012 um 15:05 Uhr


  • @DavidHobs Ich habe das vor zwei Jahren geschrieben … Ich würde heutzutage auf jeden Fall prevAll() verwenden.

    – Ed James

    27. Juni 2012 um 16:29 Uhr

  • @EdWoodcock Erwägen Sie in diesem Fall, Ihre Antwort zu aktualisieren.

    Benutzer3714134

    10. November 2015 um 14:12 Uhr

Die Verwendung von prevUntil() ermöglicht es uns, ein entferntes Geschwister zu bekommen, ohne alle 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 ruft das erste vorangehende Geschwister ab, wenn es übereinstimmt, andernfalls erhält es das Geschwister, das dem passenden vorangeht, also sichern wir einfach ein weiteres mit prev(), um das gewünschte Element zu erhalten.

Ich denke, allen Antworten fehlt etwas. Ich verwende lieber so etwas

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

Erspart Ihnen das Hinzufügen von :first innerhalb des Selektors und ist einfacher zu lesen und zu verstehen. Die Methode prevUntil() hat auch eine bessere Leistung als die Verwendung von prevAll()

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>';
}
?>

Davon können Sie sich ein Bild machen.

1429810cookie-checkWie kann ich mit jQuery das nächste vorherige Geschwister mit der Klasse finden?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy