jQuery - memilih elemen dari dalam elemen

95

katakanlah saya memiliki markup seperti ini:

<div id="foo">
  ...
  <span id="moo">
    ...
  </span>
  ...
</div>

dan saya ingin memilih #moo.

mengapa $('#foo').find('span')berhasil, tetapi $('span', $('#foo'));tidak?

jquery jquery-selectors parent-child Alex
sumber
10
Mengapa tidak $('#moo')? ;) Btw. itu berhasil: jsfiddle.net/fkling/k5X2r
Felix Kling
Saya tidak tahu mengapa, tetapi fungsi yang saya kaitkan ke span yang dipilih akan diterapkan ke semua span di halaman, bukan hanya di dalam #foo :(
Alex
2
Bagaimana jika Anda sudah memiliki elemen yang dipilih di var, jadi misalnya Anda mulai dengan var ele = $("div #foo")bagaimana Anda bisa moo dari sini (tanpa menggunakan referensi array)
Worthy7

Jawaban:

130

Anda dapat menggunakan salah satu ini [mulai dari yang tercepat]

$("#moo") > $("#foo #moo") > $("div#foo span#moo") > $("#foo span") > $("#foo > #moo")

Lihatlah

Jishnu AP
sumber
1
Saya pikir yang ketiga harus span # moo bukan span # foo?
xr280xr
60

Sebenarnya, $ ('# id', this); akan memilih #id di tingkat keturunan mana pun, bukan hanya anak langsung. Coba ini sebagai gantinya:

$(this).children('#id');

atau

$("#foo > #moo")

atau

$("#foo > span")
Pranay Rana
sumber
Itu tidak akan memilih apapun karena elemen tersebut memiliki ID moo , bukan kelasnya.
Felix Kling
4
Perlu dicatat bahwa .children()dan .find()serupa kecuali bahwa yang pertama berjalan hanya satu tingkat ke bawah sub-pohon DOM.
Kevin
10

Mengapa tidak menggunakan saja:

$("#foo span")

atau

$("#foo > span")

$('span', $('#foo')); berfungsi dengan baik di mesin saya;)

pemburu
sumber
$($(elementA), 'tr#' + key + ' span')tidak bekerja untuk saya (jQuery 1.10.2)
Cody
9

Anda dapat menggunakan findopsi untuk memilih elemen di dalam yang lain. Misalnya, untuk menemukan elemen dengan id txtName di div tertentu, Anda dapat menggunakan like

var name = $('#div1').find('#txtName').val();
Sai Kalyan Kumar Akshinthala
sumber
6

Lihat di sini - untuk menanyakan sub-elemen dari sebuah elemen :

$(document.getElementById('parentid')).find('div#' + divID + ' span.child');

Cody
sumber
3

.... tapi $ ('span', $ ('# foo')); tidak bekerja?

Metode ini disebut menyediakan konteks pemilih .

Dalam hal ini, Anda memberikan argumen kedua ke pemilih jQuery . Ini bisa berupa string objek css seperti yang Anda berikan untuk pemilihan langsung atau elemen jQuery.

misalnya.

$("span",".cont1").css("background", '#F00');

Baris di atas akan memilih semua span dalam container yang memiliki kelas bernama cont1.

DEMO

Mohd Abdul Mujib
sumber