jQuery - 从一个元素内部选择元素

Question

假设我有这样的标记：

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

我想选择 #moo。

为什么$('#foo').find('span')可行，而$('span', $('#foo'));不行？

- Alex

---

为什么不用 $('#moo')？ ;) 顺便说一下，这确实可行：http://jsfiddle.net/fkling/k5X2r/ - Felix Kling

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

如果你已经在一个变量中选定了元素，比如说 var ele = $("div #foo")，那么怎样才能从这里获取 "moo" 呢？（不能使用数组引用） - Worthy7

Answer 1

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

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

看一下

- Jishnu A P

Answer 2

实际上，$('#id', this); 会选择任何后代级别中的 #id，而不仅仅是直接子节点。请尝试使用以下代码：

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

或者

$("#foo > #moo")

或者

$("#foo > span")

- Pranay Rana

---

那不会选择任何东西，因为该元素的 ID 是 moo，而不是类。 - Felix Kling

值得注意的是，.children() 和 .find() 相似，但前者只向下遍历 DOM 子树一级。 - Kevin

Answer 3

你可以使用find选项来选择另一个元素中的元素。例如，在特定的div中查找具有id txtName的元素，可以使用以下方式。

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

- Sai Kalyan Kumar Akshinthala

Answer 4

为什么不直接使用以下代码：

$("#foo span")

或者

$("#foo > span")

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

- hunter

---

$($(elementA), 'tr#' + key + ' span') 对我来说无法工作（jQuery 1.10.2）。 - Cody

Answer 5

请看这里 - 查询元素的子元素： $(document.getElementById('parentid')).find('div#' + divID + ' span.child'); 以上代码可帮助您查询一个元素的子元素。

- Cody

Answer 6

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

这种方法被称为提供选择器上下文。

在这种情况下，您需要为jQuery选择器提供第二个参数。它可以是任何CSS对象字符串，就像您直接选择或jQuery元素时一样。

例如：

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

上面的代码将选择容器内所有类名为cont1的元素。

演示

- Mohd Abdul Mujib

---

谢谢你提供方法的名称，非常感激。 - brasofilo

Answer 7

两者似乎都可以正常工作。

请参见示例：http://jsfiddle.net/maniator/PSxkS/

- Naftali