библиотека jQuery найти ближайший предшествующий одноуровневый элемент с классом

вот грубый html, с которым я работаю:

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

мне нужно пройти от .current_sub найти ближайший предыдущий .par_cat и делать его.

.find("li.par_cat") возвращает всю нагрузку .par_cat (у меня есть около 30 на странице). Мне нужно нацелиться на одного.

буду очень признателен за любые советы :)

5 133
html jquery dom-traversal tree-traversal

5 ответов:

попробуй:

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

протестировал его с вашей разметкой:

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

заполнит ближайший предыдущий li.par_cat С "woohoo".

234

попробовать

16

использование prevUntil () позволит нам получить удаленного брата без необходимости получать все. У меня был особенно длинный набор, который был слишком интенсивным для процессора с использованием 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();

Это получает первый предшествующий брат, если он соответствует, в противном случае он получает брат, предшествующий тому, который соответствует, поэтому мы просто создаем резервную копию еще одного с prev (), чтобы получить нужный элемент.

12

Я думаю, что все ответы что-то не хватает. Я предпочитаю использовать что-то вроде этого

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

сохраняет вас не добавляя: сначала внутри селектора и легче читать и понимать. prevUntil () метод имеет лучшую производительность, а не с помощью prevAll ()

4

вы можете выполнить этот код:

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

вы можете получить представление из этого.

0