【问题标题】：jQuery - selecting elements from inside a elementjQuery - 从元素内部选择元素
【发布时间】：2011-08-14 02:18:18
【问题描述】：

假设我有这样的标记：

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

我想选择#moo。

为什么$('#foo').find('span') 有效，而$('span', $('#foo')); 无效？

【问题讨论】：

【解决方案1】：

两者似乎都在工作。

【讨论】：

【解决方案2】：

其实 $('#id', this);将在任何后代级别选择#id，而不仅仅是直接子级。试试这个：

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

或

$("#foo > #moo")

或

$("#foo > span")

【讨论】：

【解决方案3】：

为什么不直接使用：

$("#foo span")

或

$("#foo > span")

$('span', $('#foo')); 在我的机器上运行良好；）

【讨论】：

【解决方案4】：

你可以使用这些[从最快开始]

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

Take a look

【讨论】：

【解决方案5】：

看这里——查询一个元素的子元素：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

....但是 $('span', $('#foo'));不行吗？

这个方法被称为提供selector context。

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

例如。

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

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

【讨论】：