jquery trouver le frère précédent le plus proche avec la classe

voici le html approximatif avec lequel je travaille:

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

J'ai besoin de traverser à partir du .current_sub, trouver le précédent le plus proche .par_catet faire des choses dessus.

.find("li.par_cat")renvoie la charge entière de .par_cat(j'en ai environ 30 sur la page). J'ai besoin de cibler le seul.

J'apprécierais vraiment tous les conseils :)

Essayer:

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

Testé avec votre balisage:

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

remplira le précédent le plus proche li.par_catavec "woohoo".

Essayer

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

L'utilisation de prevUntil () nous permettra d'obtenir un frère distant sans avoir à tout obtenir. J'avais un ensemble particulièrement long qui était trop gourmand en CPU en utilisant prevAll ().

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();

Cela obtient le premier frère précédent s'il correspond, sinon il obtient le frère précédant celui qui correspond, donc nous en sauvegardons un de plus avec prev () pour obtenir l'élément souhaité.

Je pense que toutes les réponses manquent de quelque chose. Je préfère utiliser quelque chose comme ça

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

Vous évite de ne pas ajouter: d'abord dans le sélecteur et est plus facile à lire et à comprendre. La méthode prevUntil () a également de meilleures performances que l'utilisation de prevAll ()

Vous pouvez suivre ce code:

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

Vous pouvez vous en faire une idée.