jquery menemukan saudara terdekat sebelumnya dengan kelas

146

inilah html kasar yang saya gunakan untuk bekerja:

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

Saya perlu melintasi dari .current_sub, menemukan yang terdekat sebelumnya .par_catdan melakukan hal itu.

.find("li.par_cat")mengembalikan seluruh beban .par_cat(saya punya sekitar 30 halaman). Saya perlu menargetkan yang tunggal.

Akan sangat menghargai tips :)

jquery html traversal tree-traversal daulex
sumber
7
Wow, kucing benar-benar ada di internet! Sekarang kita punya kucing dan sub kucing juga.
JD Smith

Jawaban:

257

Mencoba:

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

Mengujinya dengan markup Anda:

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

akan mengisi yang terdekat sebelumnya li.par_catdengan "woohoo".

karim79
sumber
Terima kasih, Karim. Ini bekerja dengan baik juga, tetapi saya menganggap .prev () akan memakan lebih sedikit sumber daya, karena .prevAll akan mendapatkan SEMUA elemen yang cocok sebelumnya dan kemudian akan memfilter yang saya butuhkan. Menerima jawaban Ed.
daulex
3
Sebenarnya, setelah sedikit mengirim pesan teks, .prev () gagal dalam beberapa kasus. .prevAll dengan: pertama, bekerja setiap saat. Terima kasih.
daulex
1
.prev () hanya memeriksa elemen yang sudah ada sebelumnya. Saya menambahkan komentar pada jawaban di bawah ini bersama dengan contoh jsFiddle. Setelah melihat-lihat, ini adalah jawaban terbaik karena meskipun harus menggilir semua elemen, tidak memerlukan dua fungsi untuk mengambil semua lalu menyaring untuk menemukannya.
David Hobs
8
Apakah rata :first- rata ini berfungsi pada daftar elemen yang dikembalikan yang dimulai paling dekat dengan objek yang dipilih (sebagai lawan dari atas ke relatif relatif terhadap halaman)?
NReilingh
2
Terima kasih banyak atas jawaban yang sangat berguna. Bisakah Anda menjawab pertanyaan @NReilingh karena itu benar-benar membingungkan saya. Bukankah :firstpemilih CSS yang memilih elemen pertama di DOM (mis. div.red:firstAkan memilih DIV merah pertama di DOM ) apakah jQuery menguraikan pemilih secara berbeda?
Akuntan.
17

Mencoba 

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

Ed James
sumber
19
Tunggu apa? Tidakkah ini hanya memeriksa elemen yang sebelumnya ada? Dengan demikian kode Anda akan mengembalikan nol? - Ini dia diuji di jsFiddle: jsfiddle.net/Y2TEH
David Hobs
4
@ Davidvid saya menulis ini dua tahun lalu .... Saya pasti akan menggunakan prevAll () hari ini.
Ed James
8
@EdWoodcock pertimbangkan untuk memperbarui jawaban Anda, dalam hal ini.
Hugo Zink
14

Menggunakan prevUntil () akan memungkinkan kita untuk mendapatkan saudara jauh tanpa harus mendapatkan semua. Saya punya satu set panjang yang terlalu intensif menggunakan CPU 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();

Ini mendapatkan saudara pertama sebelumnya jika cocok, jika tidak maka saudara sebelum yang cocok, jadi kami hanya membuat cadangan satu lagi dengan prev () untuk mendapatkan elemen yang diinginkan.

Eprothro
sumber
5

Saya pikir semua jawabannya kurang. Saya lebih suka menggunakan sesuatu seperti ini

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

Menghemat Anda tidak menambahkan: pertama di dalam pemilih dan lebih mudah dibaca dan dimengerti. Metode prevUntil () memiliki kinerja yang lebih baik juga daripada menggunakan prevAll ()

Tom McDonough
sumber
0

Anda dapat mengikuti kode ini:

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

Anda bisa mendapatkan ide dari ini.

AL MaMun
sumber