สมมติว่าฉันมีมาร์กอัปดังนี้:

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

และฉันต้องการเลือก #moo

ทำไมถึงใช้$('#foo').find('span')งานได้ แต่$('span', $('#foo'));ทำไม่ได้?

คุณสามารถใช้สิ่งเหล่านี้ [เริ่มจากเร็วที่สุด]

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

ลองดูสิ

จริงๆแล้ว $ ('# id' นี้); จะเลือก #id ในระดับลูกหลานใด ๆ ไม่ใช่เฉพาะเด็กในทันที ลองสิ่งนี้แทน:

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

หรือ

$("#foo > #moo")

หรือ

$("#foo > span")

ทำไมไม่ใช้:

$("#foo span")

หรือ

$("#foo > span")

$('span', $('#foo')); ทำงานได้ดีบนเครื่องของฉัน;)

คุณสามารถใช้findตัวเลือกเพื่อเลือกองค์ประกอบภายในอื่น ตัวอย่างเช่นหากต้องการค้นหาองค์ประกอบที่มี id txtNameใน div เฉพาะคุณสามารถใช้ like

var name = $('#div1').find('#txtName').val();

ดูที่นี่ - เพื่อค้นหาองค์ประกอบย่อยขององค์ประกอบ :

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

.... แต่ $ ('span', $ ('# foo')); ไม่ได้ผล?

วิธีการนี้เรียกว่าเป็นการให้บริบทเลือก

ในนี้คุณให้อาร์กิวเมนต์ที่สองไปที่ตัวเลือก jQuery อาจเป็นสตริงออบเจ็กต์ css ใด ๆ ก็ได้เช่นเดียวกับที่คุณส่งผ่านสำหรับการเลือกโดยตรงหรือองค์ประกอบ jQuery

เช่น.

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

cont1บรรทัดข้างต้นจะเลือกครอบคลุมทั้งหมดภายในภาชนะที่มีระดับที่มีชื่อ

การสาธิต

ทั้งสองดูเหมือนจะทำงาน

ดูซอ: http://jsfiddle.net/maniator/PSxkS/