如何在children()之外访问子元素？

Question

我想获取一个元素的直接子元素数量，然后获取特定索引处子元素的类名。类似于以下代码：

var index = 25;
var children = $("#myListElement").children();
if (index < children.length) {
    if (children[index].hasClass("testClass")) {
        alert("hi!");
    }
}

我认为.children()的语法没问题，但是在jquery风格中，如何获取它们的索引元素呢？

谢谢。

- user291701

Answer 1

children方法返回一个类似数组的对象，其中包含普通的DOM节点。你需要使用jQuery将包含的元素进行封装，或者使用eq(index)方法检索它，以便能够在其上使用jQuery方法，例如hasClass。

if ($(children[index]).hasClass("testClass"))

由于明显的性能原因，jQuery默认不包装它们。

如果您使用Firebug或Chrome/Webkit开发者工具，在尝试在对象上调用未定义的方法时，您将得到一个异常。请参见示例。确保您正在观察控制台输出 :)

TypeError: Object #<an HTMLLIElement> has no method 'hasClass'

- Anurag

---

“children contains an array of plain DOM nodes” 这句话有误导性。children() 是一个像其他 jQuery 集合一样的 jQuery 集合。如果你使用 .eq(3) 而不是 [3]，它将返回预期的被 jQuery 包装过的 DOM 元素。任何被 [] 访问的 jQuery 结果集都会返回一个 DOM 元素。 - Doug Neiner

@Doug - 语句“包含一组普通的DOM节点”并不完全正确。jQuery返回一个类似数组的对象，其中包含按数字索引的DOM节点，就像数组一样。此外，请纠正我如果我错了，难道不是有一段时间jQuery默认包装所有DOM节点，然后为了性能而放弃包装吗？ - Anurag

@Doug - 是的，那个陈述有误，感谢您指出。我已经修改了它以使其更清晰。@user291701 - 要检查元素是否包含任一类，请使用 el.hasClass("class1") || el.hasClass("class2")。如果两个类都必须存在，则将 || 更改为 &&。只是普通的布尔值。 - Anurag

@user291701 - 在变量名前加上$符号对变量没有任何影响。在JavaScript中，可以在变量名的任何位置使用$符号。例如，var $foo = 1、var f$oo = 2;和var foo$ = 3，或者var $$$$$ = "hello"都是有效的JavaScript变量名。您可以在由eq返回的对象上调用jQuery方法，因为它使用jQuery将给定索引处的结果集元素包装起来并返回包装后的对象。请阅读jQuery文档中关于eq的内容。 - Anurag

在jQuery包装结果前加上$前缀只是人们遵循的一种惯例，以便轻松知道对象是否为jQuery结果以及是否可以在其上调用jQuery方法。您始终可以查询对象的jquery属性并找出相同的信息，但这基本上会使您的代码混乱不堪，充斥着jQuery的内部细节。 - Anurag

Answer 2

非常抱歉，我觉得您的问题有些令人困惑。这是您想要的吗？

var parent = $("#myitem"),
    count  = parent.children().length,
    index  = parent.children(".theClass").index();

这将获取具有特定类的项目的子索引，无需循环。

然而，如果您需要类（但已经有索引），则可以执行以下操作：

var parent = $("#myitem"),
    count  = parent.children().length,
    classN = parent.children()[3].className;

- Doug Neiner

---

我认为你的第二个答案是 OP 所追求的。 - user113716

@patrick 很好。我本来以为我理解了这个问题，但是它附带的代码示例让我感到困惑 :) - Doug Neiner

Answer 3

使用eq()：

if (children.eq(index).hasClass("testClass"))

- colinmarc

---

可以的，我可以在 hasClass() 中同时测试多个类名吗？比如 .hasClass("pig horse goat")？ - user291701

不，你需要像Anurag在接受的答案中的评论中所说的那样分别提供它们。这就是hasClass函数的工作方式。 - undefined