jQuery findet das nächste vorherige Geschwister mit der Klasse

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.

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”.

Versuchen

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

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 erhält das erste vorangehende Geschwister, wenn es passt, 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.