jQuery - 从元素内部选择元素

Question

假设我有这样的标记:

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

我想选择#moo.

为什么$('#foo').find('span')有效,但$('span', $('#foo'));不是？

Answer 1

你可以使用任何一个[从最快开始]

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

看一看

Answer 2

实际上,$('#id',这个); 会在任何后代级别选择#id,而不仅仅是直接的孩子.试试这个:

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

要么

$("#foo > #moo")

要么

$("#foo > span")

Answer 3

您可以使用findoption 来选择另一个内部的元素。例如，要在特定 div 中查找 id 为txtName的元素，您可以使用 like

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

Answer 4

为什么不使用:

$("#foo span")

要么

$("#foo > span")

$('span', $('#foo')); 在我的机器上正常工作;)

Answer 5

....但是 $('span', $('#foo')); 不起作用？

该方法称为提供选择器上下文。

在此，您向 jQuery 选择器提供第二个参数。它可以是任何 css 对象字符串，就像您传递直接选择或 jQuery 元素一样。

例如。

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

上面的行将选择容器内具有名为的类的所有跨度cont1。

Answer 6

看看这里 - 查询元素的子元素:

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