Bagaimana cara mendapatkan anak-anak dari pemilih $ (ini)?

2229

Saya memiliki tata letak yang mirip dengan ini:

<div id="..."><img src="..."></div>

dan ingin menggunakan pemilih jQuery untuk memilih anak imgdi dalam divklik pada.

Untuk mendapatkan div, saya punya pemilih ini:

$(this)

Bagaimana saya bisa membuat anak imgmenggunakan pemilih?

Alex
sumber

Jawaban:

2854

Konstruktor jQuery menerima parameter ke-2 yang disebut contextyang dapat digunakan untuk mengganti konteks pemilihan.

jQuery("img", this);

Yang sama dengan menggunakan .find()seperti ini:

jQuery(this).find("img");

Jika gambar yang Anda inginkan hanya keturunan langsung dari elemen yang diklik, Anda juga dapat menggunakan .children():

jQuery(this).children("img");
Simon
sumber
575
untuk apa nilainya: jQuery ("img", ini) secara internal dikonversi menjadi: jQuery (ini) .find ("img") Jadi yang kedua adalah sedikit lebih cepat. :)
Paul Irish
24
Terima kasih @ Paul, saya khawatir menggunakan find () salah , ternyata itu satu-satunya cara;)
Agos
5
Jika node adalah anak langsung, bukankah paling cepat melakukan $ (this) .children ('img'); ?
adamyonk
11
@adamyonk ternyata tidak, setidaknya tidak jika ini adalah sesuatu untuk pergi oleh: jsperf.com/jquery-children-vs-find/3
Simon Stender Boisen
3
Saya melihat kebalikan dari apa yang dinyatakan oleh @PaulIrish dalam contoh ini - jsperf.com/jquery-selectors-comparison-a . Adakah yang bisa menjelaskan? Entah saya salah dalam test-case, atau jquery mengubah optimasi ini dalam 4 tahun terakhir.
Jonathan Vanasco
471

Anda juga bisa menggunakannya

$(this).find('img');

yang akan mengembalikan semua imgs yang merupakan keturunandiv

Philnash
sumber
Dalam kasus umum, sepertinya $(this).children('img')akan lebih baik. misalnya <div><img src="..." /><div><img src="..." /></div></div>karena mungkin pengguna ingin menemukan img tingkat 1.
Buttle Butkus
137

Jika Anda perlu mendapatkan yang pertama imgturun satu tingkat, Anda bisa melakukannya

$(this).children("img:first")
rakslice
sumber
6
Apakah :firsthanya cocok dengan " turun tepat satu tingkat ", atau apakah cocok dengan "pertama" img yang ditemukan?
Ian Boyd
3
@IanBoyd, .children()adalah dari mana "turun tepat satu tingkat" berasal dan di :firstmana "pertama" berasal.
Tyler Crompton
3
@IanBoyd, elemen itu tidak terhitung untuk. Itu hanya akan berlaku jika Anda menggunakan .find()sebagai gantinya.children()
Tyler Crompton
2
jika Anda menggunakan: pertama dengan .find () hati-hati, jQuery tampaknya menemukan semua keturunan dan kemudian mengembalikan elemen pertama, kadang
Clarence Liu
1
@ButtleButkus Dalam pertanyaan thisitu , sudah menjadi referensi untuk <div>berisi <img>, namun jika Anda memiliki beberapa tingkatan tag untuk dilalui dari referensi yang Anda miliki maka Anda pasti dapat menyusun lebih dari satuchildren() panggilan
rakslice
76

Jika tag DIV Anda segera diikuti oleh tag IMG, Anda juga dapat menggunakan:

$(this).next();
Roccivic
sumber
16
.next () benar-benar rapuh, kecuali Anda selalu dapat menjamin elemen tersebut akan menjadi elemen berikutnya, lebih baik menggunakan metode yang berbeda. Dalam hal ini, IMG adalah turunan, bukan saudara kandung, dari div.
LocalPCGuy
OP secara eksplisit meminta seorang anak img di dalam div.
Giorgio Tempesta
65

Anak- anak langsung adalah

$('> .child-class', this)
Rayron Victor
sumber
3
Jawaban ini berpotensi menyesatkan karena tidak ada elemen dengan kelas 'anak' sehingga tidak akan berfungsi.
Giorgio Tempesta
41

Anda dapat menemukan semua elemen img dari induk div seperti di bawah ini

$(this).find('img') or $(this).children('img')

Jika Anda ingin elemen img tertentu, Anda dapat menulis seperti ini

$(this).children('img:nth(n)')  
// where n is the child place in parent list start from 0 onwards

Div Anda hanya mengandung satu elemen img. Jadi untuk ini di bawah ini benar

 $(this).find("img").attr("alt")
                  OR
  $(this).children("img").attr("alt")

Tetapi jika div Anda mengandung lebih banyak elemen img seperti di bawah ini

<div class="mydiv">
    <img src="test.png" alt="3">
    <img src="test.png" alt="4">
</div>

maka Anda tidak dapat menggunakan kode atas untuk menemukan nilai alt elemen img kedua. Jadi Anda dapat mencoba ini:

 $(this).find("img:last-child").attr("alt")
                   OR
 $(this).children("img:last-child").attr("alt")

Contoh ini menunjukkan gagasan umum bahwa cara Anda dapat menemukan objek aktual di dalam objek induk. Anda bisa menggunakan kelas untuk membedakan objek anak Anda. Itu mudah dan menyenangkan. yaitu

<div class="mydiv">
    <img class='first' src="test.png" alt="3">
    <img class='second' src="test.png" alt="4">
</div>

Anda dapat melakukan ini seperti di bawah ini:

 $(this).find(".first").attr("alt")

dan lebih spesifik seperti:

 $(this).find("img.first").attr("alt")

Anda dapat menggunakan find atau children seperti kode di atas. Untuk lebih lanjut kunjungi Children http://api.jquery.com/children/ dan Temukan http://api.jquery.com/find/ . Lihat contoh http://jsfiddle.net/lalitjs/Nx8a6/

Lalit Kumar Maurya
sumber
35

Cara merujuk ke anak di jQuery. Saya merangkumnya di jQuery berikut:

$(this).find("img"); // any img tag child or grandchild etc...   
$(this).children("img"); //any img tag child that is direct descendant 
$(this).find("img:first") //any img tag first child or first grandchild etc...
$(this).children("img:first") //the first img tag  child that is direct descendant 
$(this).children("img:nth-child(1)") //the img is first direct descendant child
$(this).next(); //the img is first direct descendant child
Oskar
sumber
Saya akan menggunakan nth-child ()
A McGuinness
31

Tanpa mengetahui ID dari DIV saya pikir Anda bisa memilih IMG seperti ini:

$("#"+$(this).attr("id")+" img:first")
Adam
sumber
54
ini mungkin benar-benar bekerja tapi itu agak jawaban Rube Goldberg :)
Scott Evernden
8
dan jika Anda akan menggunakan kode itu, setidaknya lakukan: $ ("#" + this.id + "img: first")
LocalPCGuy
10
@LocalPCGuy Anda maksud: "dan jika Anda akan menggunakan panggilan kode untuk bantuan "
gdoron mendukung Monica
Mengapa Anda melakukan ini jika 'ini' sudah memilih div yang sebenarnya? Selain itu, jika div tidak memiliki id kode ini tidak akan berfungsi.
Giorgio Tempesta
31

Coba kode ini:

$(this).children()[0]
Maxam
sumber
13
yang akan bekerja meskipun mengembalikan elemen dom bukan objek JQ
redsquare
2
Saya tidak tahu apakah itu adalah pendekatan terbaik untuk situasi saat ini, tetapi jika Anda ingin pergi rute ini dan masih berakhir dengan objek jQuery, hanya membungkus seperti itu: $($(this).children()[0]).
patridge
19
atau bahkan lebih mudah$(this:first-child)
ulangi
4
alih-alih $($(this).children()[x])digunakan $(this).eq(x)atau jika Anda ingin yang pertama, cukup $(this).first().
Cristi Mihai
16
@ rémy: Itu bahkan bukan sintaks yang valid. (Butuh waktu 2 tahun untuk semua orang memperhatikan ...)
BoltClock
23

Anda dapat menggunakan salah satu metode berikut:

1 temukan ():

$(this).find('img');

2 anak():

$(this).children('img');
Mike Clark
sumber
21

jQuery's eachadalah salah satu opsi:

<div id="test">
    <img src="testing.png"/>
    <img src="testing1.png"/>
</div>

$('#test img').each(function(){
    console.log($(this).attr('src'));
});
Thirumalai murugan
sumber
15

Anda dapat menggunakan Child Selecor untuk referensi elemen anak yang tersedia di dalam induk.

$(' > img', this).attr("src");

Dan di bawah ini adalah jika Anda tidak memiliki referensi $(this)dan Anda ingin referensi yang imgtersedia di dalam divdari fungsi lain.

 $('#divid > img').attr("src");
Dennis R
sumber
12

Ini juga harus bekerja:

$("#id img")
tetutato
sumber
2
op ingin menggunakan this
Bhargav Nanekalva
8

Berikut adalah kode fungsional, Anda dapat menjalankannya (ini adalah demonstrasi sederhana).

Ketika Anda mengklik DIV Anda mendapatkan gambar dari beberapa metode yang berbeda, dalam situasi ini "ini" adalah DIV.

$(document).ready(function() {
  // When you click the DIV, you take it with "this"
  $('#my_div').click(function() {
    console.info('Initializing the tests..');
    console.log('Method #1: '+$(this).children('img'));
    console.log('Method #2: '+$(this).find('img'));
    // Here, i'm selecting the first ocorrence of <IMG>
    console.log('Method #3: '+$(this).find('img:eq(0)'));
  });
});
.the_div{
  background-color: yellow;
  width: 100%;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="my_div" class="the_div">
  <img src="...">
</div>

Semoga ini bisa membantu!

RPichioli
sumber
5

Anda mungkin memiliki 0 hingga banyak <img>tag di dalamnya<div> .

Untuk menemukan elemen, gunakan a .find() .

Untuk menjaga keamanan kode Anda, gunakan a .each().

Menggunakan .find()dan .each()bersama - sama mencegah kesalahan referensi nol dalam kasus 0 <img>elemen sementara juga memungkinkan untuk penanganan beberapa <img>elemen.

// Set the click handler on your div
$("body").off("click", "#mydiv").on("click", "#mydiv", function() {

  // Find the image using.find() and .each()
  $(this).find("img").each(function() {
  
        var img = this;  // "this" is, now, scoped to the image element
        
        // Do something with the image
        $(this).animate({
          width: ($(this).width() > 100 ? 100 : $(this).width() + 100) + "px"
        }, 500);
        
  });
  
});
#mydiv {
  text-align: center;
  vertical-align: middle;
  background-color: #000000;
  cursor: pointer;
  padding: 50px;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="mydiv">
  <img src="" width="100" height="100"/>
</div>

Jason Williams
sumber
kenapa kamu melakukan ini? $("body").off("click", "#mydiv").on("click", "#mydiv", function() {
Chris22
Saya tidak tahu bagaimana atau di mana @Alex menggunakan cuplikannya. Jadi, saya membuatnya seaman dan sem generik mungkin. Melampirkan acara ke tubuh akan membuatnya sehingga acara akan memicu bahkan jika div tidak di dom pada saat acara itu dibuat. Mengosongkan acara sebelum membuat yang baru mencegah pawang menjalankan lebih dari satu kali ketika suatu peristiwa dipicu. Tidak perlu melakukannya dengan cara saya. Cukup dengan menempelkan acara ke div juga akan bekerja.
Jason Williams
Terima kasih. Saya telah melihat ini sebelumnya dalam sebuah skrip dan meskipun berfungsi untuk apa yang dimaksudkan oleh programmer, ketika saya mencoba menggunakannya untuk modal window, acara tersebut masih membuat beberapa modals pada satu klik. Saya kira saya salah menggunakannya, tetapi akhirnya saya menggunakan event.stopImmediatePropagation()elemen untuk mencegah hal itu terjadi.
Chris22
4

$(document).ready(function() {
  // When you click the DIV, you take it with "this"
  $('#my_div').click(function() {
    console.info('Initializing the tests..');
    console.log('Method #1: '+$(this).children('img'));
    console.log('Method #2: '+$(this).find('img'));
    // Here, i'm selecting the first ocorrence of <IMG>
    console.log('Method #3: '+$(this).find('img:eq(0)'));
  });
});
.the_div{
  background-color: yellow;
  width: 100%;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="my_div" class="the_div">
  <img src="...">
</div>

CSEngineer
sumber
0

Anda bisa menggunakannya

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 $(this).find('img');
</script>
Hassan Fayyaz
sumber
Bagaimana ini berbeda dari jawaban philnash 11 tahun yang lalu?
David
0

Jika img Anda adalah elemen pertama di dalam div lalu coba

$(this.firstChild);

Kamil Kiełczewski
sumber