jQuery trouver le plus proche frère précédent avec la classe
Voici le html brut 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>
Je dois traverser le .current_sub, trouver le .par_cat précédent le plus proche et y faire des choses.
.find("li.par_cat") retourne toute la charge de .par_cat (j'ai environ 30 sur la page). J'ai besoin de cibler le seul.
Apprécierait vraiment tous les conseils:)
5 réponses
Essayez:
$('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".
L'utilisation de prevUntil () nous permettra d'obtenir un frère éloigné sans avoir à tout obtenir. J'ai eu 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 désiré.
Je pense que toutes les réponses manquent de quelque chose. Je préfère utiliser quelque chose comme ceci
$('li.current_sub').prevUntil("li.par_cat").prev();
Vous permet 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 plutôt que d'utiliser 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 obtenir une idée de cela.