jquery sınıfla en yakın önceki kardeşi bulur

148

işte çalışacağım kaba 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>

Şuradan geçmem .current_sub, en yakın öncekini bulmam .par_catve ona bir şeyler yapmam gerekiyor.

.find("li.par_cat").par_cat(Sayfada yaklaşık 30 var) öğesinin tamamını döndürür . Tek olanı hedef almalıyım.

— Daulex
kaynak

261

Deneyin:

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

İşaretlemenizle test edin:

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

en yakın li.par_catöncekini "woohoo" ile dolduracak .

— karim79
kaynak

3

Aslında, biraz mesajlaştıktan sonra, .prev () birkaç örnekte başarısız oldu. .prevAll with: ilk, her seferinde çalıştı. Teşekkür ederim.

— daulex

1

.prev () yalnızca hemen önceki öğeyi kontrol eder. JsFiddle örneklemesi ile birlikte aşağıdaki cevaba yorumu ekledim. Etrafa baktıktan sonra, bu en iyi cevaptır, çünkü tüm öğeler arasında dolaşması gerekmesine rağmen, hepsini yakalamak için iki işlev gerektirmez ve sonra onu bulmak için filtreleyin.

— David Hobs

8

Bu :first, seçilen nesneye en yakın yerden başlayan (sayfaya göre yukarıdan aşağıya doğru) döndürülen öğeler listesi üzerinde çalışmak anlamına mı geliyor ?

— NReilingh

2

Çok faydalı cevap için çok teşekkür ederim. @NReilingh sorusuna cevap verebilir misiniz, çünkü gerçekten kafamı karıştırıyor. Değil mi :firstseçer ilk eleman bir CSS seçici DOM (örneğin div.red:firstilk kırmızı DIV seçecektir DOM jQuery farklı seçici ayrıştırmak mi)?

— Muhasebeci م

1

@Accountant م Çağrılmış CSS seçici yok :first.

— TylerH

17

Deneyin

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

— Ed James
kaynak

20

Bir dakika ne? Bu sadece hemen önceki öğeyi kontrol etmiyor mu? Böylece kodunuz null döndürür? - Burada jsFiddle üzerinde test edildi: jsfiddle.net/Y2TEH

— David

4

@DavidHobs Bunu iki yıl önce yazdım .... Bu günlerde kesinlikle prevAll () kullanacağım.

— Ed James

8

@EdWoodcock bu durumda cevabınızı güncellemeyi düşünün.

— Hugo Zink

14

PrevUntil () kullanmak, hepsini almak zorunda kalmadan uzak bir kardeş edinmemizi sağlayacaktır. PrevAll () kullanarak çok yoğun CPU kullanan özellikle uzun bir setim vardı.

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();

Bu, eşleşirse önceki ilk kardeşi alır, aksi takdirde eşleşen olandan önceki kardeşi alır, bu nedenle istenen öğeyi elde etmek için prev () ile bir tane daha yedekleriz.

— eprothro
kaynak

5

Bence tüm cevaplarda bir eksiklik var. Bunun gibi bir şey kullanmayı tercih ederim

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

Eklemeden kurtarır: önce seçicinin içindedir ve okunması ve anlaşılması daha kolaydır. prevUntil () yöntemi, prevAll () kullanmak yerine daha iyi bir performansa sahiptir

— Tom McDonough
kaynak

Önce bunu denedim, ne oldu prevUntil birçok öğe döndürüyor, sonra birçok öğenin her biri için prev () alıyor. İstenen sonuç bir elementtir

— JasonWilson

0

Bu kodu takip edebilirsiniz:

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

Bundan fikir edinebilirsiniz.

— AL MaMun
kaynak