Cara mendapatkan elemen jQuery ke-n

311

Di jQuery, $("...").get(3)mengembalikan elemen DOM ke-3. Apa fungsi untuk mengembalikan elemen jQuery ke-3?

jquery Sam Lee
sumber

Jawaban:

310

Mengapa tidak menelusuri halaman penyeleksi (pendek) terlebih dahulu?

Ini dia: :eq()operator. Ini digunakan seperti get(), tetapi mengembalikan objek jQuery.

Atau Anda dapat menggunakan .eq()fungsi juga.

Dykam
sumber
23
Bukankah itu seharusnya .eq()bukan :eq()?
RubenGeert
15
Ya, .eq()lebih sesuai untuk pertanyaan OP. :eq()digunakan dalam parameter string ke $, sedangkan .eq()metode pada objek jQuery yang ada.
mjswensen
55
Aku bersumpah aku harus pergi dan mencari ini setiap . lajang . waktu .
ivarni
3
@ JoelWorsham Tergantung pada perilaku yang diinginkan. $('select').find('option').eq(n)pada dasarnya akan mengabaikan pengelompokan, dan mendapatkan semua opsi secara keseluruhan. Jika Anda menginginkannya per grup, sesuatu seperti ini diperlukan:$('select').find('optgroup').each(function() { $(this).find('option').eq(n)...; })
Dykam
4
"Mengapa tidak menelusuri halaman penyeleksi (pendek) terlebih dahulu?" - Karena "eq" adalah nama yang sangat buruk dan saya secara teratur melewatkannya karena eq bagi saya berarti perbandingan ....
mmlac
309

Anda dapat menggunakan pemilih : eq , misalnya:

$("td:eq(2)").css("color", "red"); // gets the third td element

Atau fungsi eq (int) :

$("td").eq(2).css("color", "red");

Juga, ingat bahwa indeks ini berbasis nol.

CMS
sumber
7
Sebagai sinonim, Anda juga dapat menggunakan :nth()pemilih - jangan dikacaukan dengan:nth-child()
user123444555621
Jawaban yang lebih baik dan tidak diedit 3 tahun setelah fakta :)
Andrew
terima kasih untuk benar-benar menjelaskan cara menggunakan pemilih / fungsi
Joseph Rogers
49

jika Anda memiliki kontrol atas kueri yang membangun objek jQuery, gunakan :eq()

$("div:eq(2)")

Jika Anda tidak memiliki kendali atas itu (misalnya, sedang dilewatkan dari fungsi lain atau sesuatu), kemudian gunakan .eq()

var $thirdElement = $jqObj.eq(2);

Atau jika Anda ingin bagian dari mereka (katakanlah, elemen ketiga, keempat dan kelima), gunakan .slice()

var $third4th5thElements = $jqObj.slice(2, 5);
nickf
sumber
Sedang mencari slice, tetapi tidak yakin bagaimana cara mencari. Terima kasih telah melampaui apa yang diperlukan dalam pertanyaan awal.
Samik R
4
Untuk orang-orang yang menemukan jawaban ini, satu hal yang perlu diperhatikan adalah bahwa pemilih anak ke-1 didasarkan pada 1: eq or .eq () berbasis 0
Sudhanshu Mishra
1
Anda harus menggunakan, .eq()bukan yang :eq()sebenarnya. Peningkatan kinerja sedikit.
Qwerty
13

Saya pikir Anda bisa menggunakan ini 

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

Ia menemukan li kedua di setiap ul yang cocok dan mencatatnya.

JoenasE
sumber
11

.eq () -Bilangan bulat yang menunjukkan posisi elemen berbasis-0.

Ex:

Pertimbangkan sebuah halaman dengan daftar sederhana di atasnya:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

Kami dapat menerapkan metode ini ke sekumpulan item daftar:

$( "li" ).eq( 2 ).css( "background-color", "red" );

Untuk informasi lebih lanjut: .eq ()

tilak
sumber
3

Jika Anda sudah memiliki objek jquery dalam sebuah variabel, Anda juga bisa memperlakukannya sebagai array yang diindeks normal, tanpa menggunakan jquery:

var all_rows = $("tr");
for(var i=0; i < all_rows.length; i++){
   var row = all_rows[i];
   //additionally, you can use it again in a jquery selector
   $(row).css("background-color","black");
}

Meskipun contoh di atas tidak berguna dengan cara apa pun, ini menggambarkan bagaimana Anda dapat memperlakukan objek yang dibuat oleh jquery sebagai array yang diindeks.

Au.Merci
sumber
Benar, dan satu lagi petunjuk (semoga bermanfaat): Jika baris berisi daftar <select>elemen, dan Anda menginginkan elemen combobox yang dipilih, gunakan$(row).val();
Matt
2

Jika saya memahami pertanyaan Anda dengan benar, Anda selalu dapat membungkus fungsi get seperti:

var $someJqueryEl = $($('.myJqueryEls').get(3));
pengguna1205577
sumber
3
Ini hanya "jalan yang sulit" dan inilah yang eq()memberi Anda gratis.
Caumons
1

Jika Anda ingin mengambil elemen / node atau tag tertentu dalam loop untuk misalnya

<p class="weekday" data-today="monday">Monday</p>
<p class="weekday" data-today="tuesday">Tuesday</p>
<p class="weekday" data-today="wednesday">Wednesday</p>
<p class="weekday" data-today="thursday">Thursday</p>

Jadi, dari loop kode di atas dieksekusi dan kami ingin bidang tertentu untuk memilih untuk itu kita harus menggunakan pemilihan jQuery yang dapat memilih hanya elemen yang diharapkan dari loop di atas sehingga, kode akan

$('.weekdays:eq(n)');

misalnya

$('.weekdays:eq(0)');

serta dengan metode lain

$('.weekday').find('p').first('.weekdays').next()/last()/prev();

tetapi metode pertama lebih efisien bila HTML <tag>memiliki nama kelas yang unik.

CATATAN: Metode kedua digunakan ketika mereka tidak ada nama kelas di elemen target atau node.

untuk lebih lanjut, ikuti https://api.jquery.com/eq/

Vrushal Raut
sumber
0

Untuk iterasi menggunakan pemilih tampaknya tidak masuk akal:

var some = $( '...' );

for( i = some.length -1; i>=0; --i )
{
   // Have to transform in a jquery object again:
   //
   var item = $( some[ i ] );

   // use item at will
   // ...
}

sumber
0

Contoh Langsung untuk mengakses dan menghapus elemen ke-N dengan jQuery:

<html>
<head></head>
<body>
    <script type="text/javascript" 
    src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('li:eq(1)').hide();
      });
    </script>
    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
</body>
</html>

Saat dijalankan, ada dua item dalam daftar berurutan yang menunjukkan, Pertama, dan Ketiga. Yang kedua disembunyikan.

Eric Leschinski
sumber
PS: Hitungannya mulai dari 0; Pertama di indeks 0, kedua di indeks 1 dan seterusnya ....
KNU
0 
 $(function(){
            $(document).find('div').siblings().each(function(){
                var obj = $(this);
                obj.find('div').each(function(){
                    var obj1 = $(this);
                    if(!obj1.children().length > 0){
                        alert(obj1.html());
                    }
                });

            });
        });

<div id="2">
    <div>
        <div>
            <div>XYZ Pvt. Ltd.</div>
        </div>
    </div>
</div>
<div id="3">
    <div>
        <div>
            <div>ABC Pvt Ltd.</div>
        </div>
    </div>
</div>
Sanjay Verma
sumber
"$ (function () {" pertama kali jatuh, saya telah membuat fungsi anonim, yang dipecat secara otomatis. Di dalamnya, saya menemukan tiga orangtua div menggunakan saudara kandung. Kemudian saya mengulangi di semua 3 orangtua div dan memeriksa panjang setiap panjang anak-anak. Bagaimana saya dapat mengidentifikasi bahwa apakah div terakhir atau tidak di div induk. Sekarang saya memberitahukan html div terakhir dari setiap 3 induk div utama.
Sanjay Verma
Anda dapat mengedit jawaban Anda, alih-alih memberikan informasi dalam komentar :)
T3 H40