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

146

вот грубый 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 на странице). Мне нужно нацелиться на одного.

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

jquery html traversal tree-traversal daulex
источник
7
Вау, кошки действительно есть по всему интернету! Теперь у нас тоже есть кошки и кошки.
ДжейДи Смит

Ответы:

257

Пытаться:

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

Протестировал это с вашей разметкой:

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

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

karim79
источник
спасибо Карим. Это тоже хорошо работало, но я предполагаю, что .prev () будет потреблять меньше ресурсов, так как .prevAll получит ВСЕ предыдущие сопоставленные элементы, а затем отфильтрует тот, который мне нужен. Принимая ответ Эда.
daulex
3
На самом деле, после небольшого количества текстовых сообщений, .prev () не удалось в нескольких случаях. .prevAll с: во-первых, работал каждый раз. Спасибо.
daulex
1
.prev () проверяет только непосредственно предшествующий элемент. Я добавил комментарий к ответу ниже вместе с примером jsFiddle. После осмотра, это лучший ответ, поскольку, хотя он должен циклически проходить по всем элементам, ему не нужны две функции, чтобы захватить все, а затем отфильтровать, чтобы найти его.
Дэвид Хобс
8
Означает ли это, что :firstвы работаете со списком возвращаемых элементов, который начинается ближе всего к выбранному объекту (в противоположность сверху вниз относительно страницы)?
NReilingh
2
Большое спасибо за очень полезный ответ. Можете ли вы ответить на вопрос @NReilingh, потому что это действительно смущает меня. Разве :firstCSS-селектор, который выбирает первый элемент в DOM (например div.red:first, выберет первый красный DIV в DOM ), не проанализировал ли jQuery селектор по-другому?
Бухгалтер
17

Пытаться 

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

Эд Джеймс
источник
19
Чего ждать? Разве это не проверяет только непосредственно предшествующий элемент? Таким образом, ваш код будет возвращать ноль? - Здесь это проверено на jsFiddle: jsfiddle.net/Y2TEH
Дэвид Хобс
4
@DavidHobs Я написал это два года назад .... Я, конечно, буду использовать prevAll () в эти дни.
Эд Джеймс
8
В этом случае @EdWoodcock рассмотрите возможность обновления вашего ответа.
Хьюго Цинк
14

Использование 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 (), чтобы получить нужный элемент.

eprothro
источник
5

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

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

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

Том Макдоно
источник
0

Вы можете следовать этому коду:

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

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

AL MaMun
источник