Question

这是我正在尝试做的事情：找到第一个div，找到该div中的第一个段落，然后获取该元素的文本。到目前为止，我所做的方式相当笨拙，每个元素周围都有多个$（）包装：

$($($('div')[0]).children('p').get(0)).text();

我想知道是否有更优雅的连锁方式，例如：

$('div')[0]
  .children('p')[0]
  .text();
// That doesn't work

Answer 1

所有你需要的是：

$('div:first-child p:first-child').text();

供您参考：

$('div')[0]
  .children('p')[0]
  .text();
// That doesn't work

它不起作用的原因是因为一旦你使用括号从jQuery提供的匹配选择器中提取元素，你只能得到基本的javascript DOM元素（不是jquery对象）。尽管如此，它并不是导航DOM的好方法。如果你真的想单独打电话给它们，它会像这样（再次，不推荐）：

var __txtImLookingFor = '';
$.each($('div'), function() {
    if (__txtImLookingFor.length === 0) {
        $.each($(this).children('p'), function() {
            if (__txtImLookingFor.length === 0) {
                __txtImLookingFor = $(this).text();
            }
        });
    }
});

显然，使用像这样的jQuery对象导航DOM实际上并不是一个好方法，除非你在其中发生了更多的条件逻辑。

Answer 2

您可以使用 :eq() 来选择使用索引

$('div:eq(0) p:eq(0)').text();

此外，您可以使用 :first ，它的伪类等同于:eq(0)

$('div:first p:first').text();

Answer 3

这应该可以正常工作：

$('div').first().find('p').first().text();
//or to more closely match your code:
$('div').first().children('p').first().text();

你要写的是：

$('div').eq(0).children('p').eq(0).text();
//Note: you're only selecting p elements that are direct children of the first div

注意：当您使用[0]时，您将jQuery集合减少为DOM元素，并且您将丢失将在集合上运行的所有jQuery方法。使用.eq(0)或first()保留jQuery方法，因为结果仍然是jQuery集合。

链接在jquery中的元素选择器

3 个答案: