jQuery - 从元素内部选择元素

Posted 2023-02-19

【中文标题】jQuery - 从元素内部选择元素

【英文标题】：jQuery - selecting elements from inside a element

【发布时间】：2011-08-14 02:18:18

【问题描述】：

假设我有这样的标记：

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

我想选择#moo。

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

【问题讨论】：

为什么不$('#moo')？ ;） 顺便提一句。它确实有效：jsfiddle.net/fkling/k5X2r

我不知道为什么，但是我挂钩到所选跨度的函数会应用于页面中的所有跨度，而不仅仅是#foo 内部的跨度:(

如果你已经在 var 中选择了元素，例如你从 var ele = $("div #foo") 开始，你怎么能从这里到 moo（不使用数组引用）

【参考方案1】：

两者似乎都在工作。

见小提琴：http://jsfiddle.net/maniator/PSxkS/

【参考方案2】：

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

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

或

$("#foo > #moo")

或

$("#foo > span")

【讨论】：

这不会选择任何内容，因为该元素具有 ID moo，而不是类。

值得注意的是，.children() 和 .find() 是相似的，只是前者只在 DOM 子树下一层。

【参考方案3】：

为什么不直接使用：

$("#foo span")

或

$("#foo > span")

---

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

【讨论】：

$($(elementA), 'tr#' + key + ' span') 不适合我（jQuery 1.10.2）

【参考方案4】：

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

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

Take a look

【讨论】：

我认为第三个应该是 span#moo 而不是 span#foo？

【参考方案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 的类的所有跨度。

DEMO

【讨论】：

感谢提供方法名称，非常感谢