web-dev-qa-db-fra.com

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 parcourir à partir du .current_sub, trouver le .par_cat précédent le plus proche et le modifier.

.find("li.par_cat") renvoie le chargement complet de .par_cat (j'ai environ 30 sur la page). J'ai besoin de cibler l'unique.

J'apprécierais vraiment tous les conseils :)

jqueryhtmltraversaltree-traversal
137
daulex

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 li.par_cat précédent le plus proche avec "woohoo".

242
karim79

Essayez 

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

16
Ed James

Utiliser prevUntil () nous permettra d’avoir un frère éloigné sans avoir à tout avoir. J'avais un ensemble particulièrement long qui nécessitait beaucoup de temps processeur 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, le frère précédent celui qui correspond. Nous en sauvegardons donc un de plus avec prev () pour obtenir l'élément souhaité.

13
eprothro

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

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

Vous évite d'ajouter: d'abord dans le sélecteur, il est plus facile à lire et à comprendre. La méthode prevUntil () offre également de meilleures performances que d'utiliser prevAll ()

5
Tom McDonough

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 en avoir une idée. 

0
AL MaMun