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). Мені потрібно націлити єдиного.

Буду дуже вдячний за будь-які поради :)


7
Нічого собі, коти справді є в Інтернеті! Зараз у нас є також парні коти та субкоти.
JD Smith

Відповіді:


257

Спробуйте:

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

Випробували його за допомогою своєї розмітки:

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

заповнить найближчий попередній li.par_cat"woohoo".


дякую, Карим Це також спрацювало добре, але я припускаю, що .prev () буде споживати менше ресурсів, оскільки .prevAll отримає ВСІ попередні відповідні елементи, а потім фільтрує потрібний мені. Приймаючи відповідь Еда.
dalex

3
Насправді, після трохи надсилання тексту, .prev () вийшов з ладу в декількох випадках. .prevВсі з: по-перше, працювали кожен раз. Дякую.
dalex

1
.prev () перевіряє лише безпосередньо попередній елемент. Я додав коментар до відповіді нижче разом із jsFiddle, що пояснює Озирнувшись, це найкраща відповідь, оскільки, хоча він повинен проїхати всі елементи, йому не потрібні дві функції, щоб схопити все, а потім фільтрувати, щоб знайти його.
Девід Хобс

8
Чи означає :firstце, що працює над списком повернених елементів, який починається найближче до обраного об’єкта (на відміну від верху до низу щодо сторінки)?
NReilingh

2
Дуже дякую за дуже корисну відповідь. Чи можете ви відповісти на питання @NReilingh, тому що це мене справді бентежить. Чи не :firstселектор CSS, який вибирає перший елемент у DOM (наприклад div.red:first, вибере перший червоний DIV у DOM ), чи jQuery розбирав селектор по-іншому?
Бухгалтер з

17

Спробуйте

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


19
Чекати, що? Чи це не лише перевіряє безпосередньо попередній елемент? Таким чином, ваш код повернеться нульовим? - Ось тестується на jsFiddle: jsfiddle.net/Y2TEH
David Hobs

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 (), щоб отримати потрібний елемент.


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

З цього ви можете отримати ідею.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.