jquery znajduje najbliższe poprzednie rodzeństwo z klasą

146

oto zgrubny kod HTML, z którym pracuję:

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

Muszę przejść od strony .current_sub, znaleźć najbliższą poprzednią .par_cati coś z nią zrobić.

.find("li.par_cat")zwraca cały ładunek .par_cat(mam około 30 na stronie). Muszę wycelować w jednego.

Naprawdę doceniłbym wszelkie wskazówki :)

daulex
źródło
7
Wow, koty naprawdę są w całym internecie! Teraz mamy też par cats i sub cats.
JD Smith

Odpowiedzi:

257

Próbować:

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

Przetestowałem to ze swoimi znacznikami:

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

wypełni najbliższą poprzednią li.par_cat„woohoo”.

karim79
źródło
dziękuję Karim. To też działało dobrze, ale zakładam, że .prev () zużyje mniej zasobów, ponieważ .prevAll pobierze WSZYSTKIE poprzednio dopasowane elementy, a następnie przefiltruje ten, którego potrzebuję. Przyjmowanie odpowiedzi Eda.
daulex
3
Właściwie, po krótkiej wiadomości tekstowej, funkcja .prev () zawiodła w kilku przypadkach. .prev Wszystko z: po pierwsze, działało za każdym razem. Dziękuję Ci.
daulex
1
.prev () sprawdza tylko bezpośrednio poprzedzający element. Dodałem komentarz do odpowiedzi poniżej wraz z przykładem jsFiddle. Po rozejrzeniu się jest to najlepsza odpowiedź, ponieważ chociaż musi przechodzić przez wszystkie elementy, nie wymaga dwóch funkcji, aby pobrać wszystko, a następnie filtru, aby go znaleźć.
David Hobs
8
Czy to oznacza, że :firstpracujesz na liście zwracanych elementów, która zaczyna się najbliżej wybranego obiektu (w przeciwieństwie do góry do dołu względem strony)?
NReilingh
2
Bardzo dziękuję za bardzo przydatną odpowiedź. Czy możesz odpowiedzieć na pytanie @NReilingh, ponieważ naprawdę mnie to zdezorientowało. Czy :firstselektor CSS, który wybiera pierwszy element w DOM (np. Wybiera div.red:firstpierwszy czerwony DIV w DOM ), nie czy jQuery przeanalizował selektor inaczej?
Księgowy م
17

Próbować

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

Ed James
źródło
19
Czekaj, co? Czy to nie sprawdza tylko bezpośrednio poprzedzającego elementu? Zatem twój kod zwróciłby null? - Tutaj jest testowany na jsFiddle: jsfiddle.net/Y2TEH
David Hobs
4
@DavidHobs Napisałem to dwa lata temu .... Na pewno użyłbym prevAll () w tych dniach.
Ed James
8
@EdWoodcock rozważ zaktualizowanie swojej odpowiedzi w takim przypadku.
Hugo Zink
14

Użycie prevUntil () pozwoli nam zdobyć dalekiego rodzeństwa bez konieczności zdobywania wszystkich. Miałem szczególnie długi zestaw, który był zbyt obciążający procesor przy użyciu 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();

Pobiera pierwsze poprzedzające rodzeństwo, jeśli pasuje, w przeciwnym razie pobiera rodzeństwo poprzedzające pasujące, więc po prostu wykonujemy kopię zapasową jeszcze jednego za pomocą prev (), aby uzyskać pożądany element.

eprothro
źródło
5

Myślę, że wszystkim odpowiedziom czegoś brakuje. Wolę używać czegoś takiego

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

Oszczędność konieczności dodawania: najpierw wewnątrz selektora i jest łatwiejsza do odczytania i zrozumienia. Metoda prevUntil () również ma lepszą wydajność niż metoda prevAll ()

Tom McDonough
źródło
0

Możesz śledzić ten kod:

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

Możesz mieć pomysł z tego.

AL MaMun
źródło