如何从jQuery对象中选择元素？

Question

说我有以下代码：

<div class="foo">
  <div class="t1">A</div>
  <div class="t2">B</div>
</div>

//JS

var obj = $('.foo');

现在我想从t2元素中获取文本。如何使用obj对象选择此项？

不工作：var txt = $(obj + '.t2').text();
这很好用：var txt = obj.find('.t2').text();
我也知道我可以使用这个var txt = $('.foo .t2').text();

但我认为使用.find()比直接选择更需要资源。有没有办法可以直接使用我的obj选择子元素？

Answer 1

一次尝试这个：

var txt = $(obj + '.t2').text();

这不起作用，因为您试图将字符串附加到对象，其结果将不是有效的选择器。

var txt = obj.find('.t2').text();

这将查找原始选择器中缓存的元素子集中的.t2元素。这是用于场景的最佳方法，实际上使用的资源少于示例3：

var txt = $('.foo .t2').text();

也可以，但是它需要jQuery再次扫描DOM，这是应该尽可能避免的。

Answer 2

你可以尝试

 obj.children().eq(1).text()

通过这种方式，您可以访问obj变量的子项，取第二个（基于0的索引）并访问其文本。

Answer 3

如果您的条件是必须通过obj元素，那么我相信find()是可行的方法。我在jQuery的find（）文档中没有看到任何关于它是否与直接选择器相比的效率，但我认为你只是搜索你{{的后代'的事实。 1}} obj意味着它效率太低。

find()

Answer 4

选择孩子的最直接方式是让所有孩子通过索引访问它们：

var ch = obj.children();
var text = ch.eq(1).text();

这自然意味着您必须知道子元素的顺序。

您可以在children method中使用选择器。这将使得与选择器匹配的子项，但与使用find的唯一区别在于它只查找直接子项，因此在您的情况下它的工作方式相同：

var text = obj.children('.t2').text();