jQuery - 使用$(this)选择子元素

Question

我尝试使用jQuery的$(this)选择器和元素的类来计算一个div内部子元素的数量，但结果却不同。我认为jQuery的$(this)指的是函数的所有者对象，是否有什么特殊之处我没有注意到？

$('.parent').ready(function(){
        $('.parent').children().length; // 6
        $(this).children().length; // 1
});

- Khang Nguyen

---

除了第三行的语法错误之外？ - mingos

哦，是的，除此之外（我已经修好了）:) - Khang Nguyen

Answer 1

This:

    $('.parent').children().length; // 6

这是正确的方法。这样做：

    $(this).children().each(function().length; // 1

这是一种语法错误。如果你真的想遍历子元素，可以使用“.each()”，但必须正确使用：

    $(this).children().each(function() {
      var $child = $(this);
      // ...
    });

请注意，在“.each()”回调函数内，this将随着jQuery调用函数的每个子元素而逐个引用。

- Pointy

---

你的$(this).children().each(function() {});对我不起作用。 - Khang Nguyen

就像示例中所写的那样，它什么也没做；你想让它做什么？那不是计算子元素数量的方法；然而，这是对每个子元素执行某些操作的一种方式。 - Pointy

好的，$.each() 不是一个好的计算子元素数量的方法，而且我也不是在问 $.each()。我在询问 $('.parent').ready() 函数中 $('.parent') 和 $(this) 的区别。我原以为这两个选择器是相同的，但似乎我错了，你有什么想法吗？ - Khang Nguyen

好的，$('.parent') 选择所有类名为 "parent" 的元素。在 ".each()" 函数内部，this 将指向单个元素。"ready()" 处理程序始终适用于整个文档，无论您使用什么选择器，因此在 "ready" 处理程序中，this 将根本不引用您的元素。 - Pointy

Answer 2

$('.parent').ready() 方法中的 $(this) 指的是 $('.parent') 对象。

children() 集合的 each() 方法中的 $(this) 指的是当前迭代的子元素。

因此，实现相同数量的方法（无论出于何种原因）是：

$('.parent').ready(function(){
   var directLength = $(this).children().length; // 6
   var indirectLength = 0;
   $(this).children().each(function(){
      indirectLength++;
   });

   alert([directLength, indirectLength].join("\n"));
});

编辑：您的评论只能有一个意思：您有6个 class 为 parent 的元素，每个元素只有一个子元素。因此，我假设您想要计算父元素的数量，这是正确的代码：

$(document).ready(function() {
   var directLength = $('.parent').length; // 6
   var indirectLength = 0;
   $('.parent').each(function() {
      indirectLength++;
   });

   alert([directLength, indirectLength].join("\n"));
});

- Shadow The Spring Wizard

---

我修复了语法错误。我运行了你的函数，它给了我“1 1”，有什么想法吗？我完全同意结果应该是“6 6”，但也许关于$(this)还有一些奇怪的东西我还不知道。 - Khang Nguyen

@Nguy 我现在明白了.. 请看我的修改。$('.parent') 是所有具有该类的六个元素的集合，我想你想要单独迭代每个元素？ - Shadow The Spring Wizard

@Shadow 迭代使用 $('.parent').each(function() {}) 很简单，我只是想知道为什么在 $('.parent').ready() 中的 $(this) 不像这种方式一样工作。在我的问题示例代码中，$(this) 不是一个包含 6 个元素的集合（$(this).children().length; 返回 1）。 - Khang Nguyen

@Ngu 因为你代码中的 $(this) 指向具有类名 "parent" 的当前元素，所以 ready() 方法会分别应用于它们。 - Shadow The Spring Wizard

如果我有一个类（或ID）为“parent”的div，并且我想在$（“parent”）.ready（）函数内计算其子元素的数量（或执行某些功能），那么是否有任何方法可以使用“this”关键字来实现？ - Khang Nguyen