jQuery .index()，混淆了参数的变化答案

【问题标题】：jQuery .index(), confusing changes with argumentjQuery .index()，混淆了参数的变化
【发布时间】：2015-02-20 19:28:31
【问题描述】：

http://learn.jquery.com/using-jquery-core/understanding-index/

也许我错过了上面文章中的某些内容，但我在理解为什么索引号会改变它在与 .index() 一起使用参数时的行为方式时遇到了一些麻烦。

例如，用

<body> 
        <button id="console2">consoleSection2</button>
        <ul>
            <div class="test"></div>
            <li id="foo2">foo</li>
            <li id="bar2" class="test">bar</li>
            <li id="baz2">baz</li>
            <div class="test"></div>
        </ul>
        <div id="last"></div>
</body>

如果我跑了

console.log( 
    "Index: " + $("#foo2").index()
);

我得到 "Index: 1"，而如果我运行

"索引：" + $("#foo2").index("li")

我得到 “索引：0”。

为什么会改变？对我来说，它会保持不变，因为“#foo2”已经在一个“li”元素中。

另外，为什么它会变成 0 作为索引？是因为它是第一个 id 为“#foo2”的“li”实例吗？

http://jsfiddle.net/f88zxaxo/

【问题讨论】：

那是无效的html。 div 不应该是 UL 的兄弟姐妹。 w3.org/TR/html-markup/ul.html
这不是最终产品，只是我正在测试/学习的东西。另外它类似于 learn.jquery.com/using-jquery-core/understanding-index 。不过还是谢谢你的信息。

标签： javascript jquery html indexing

【解决方案1】：

当您将选择器字符串传递给.index() 时，返回值指示第一个匹配元素在组成jQuery 对象的元素列表中的位置。

如果没有参数，.index() 会告诉您元素在其 HTML 容器元素中在其兄弟元素中的位置。

您从 $("#foo2").index() 得到 1，因为“foo2”元素位于包含 <ul> 的元素中的位置 1（顺便说一句，这是无效的标记）。但是，您从 $("#foo2").index("li") 得到 0，因为 jQuery 对象中只有一个元素，它是一个 <li> 元素。如果你尝试$("#foo2").index("span")，你会得到-1。

【讨论】：

你能举个例子说明 jQuery 对象中有多个元素吗？我有两个带有“test”类的“div”实例，但是记录“Index：”+ $(“.test”).index(“div”)也会出现“Index：0”。
@Terf 考虑将$("li") 用于您的文档。该 jQuery 对象将包含 3 个元素。因此，$("li").index("#baz2") 将为 2，而$("#baz2").index() 将为 3，$("#baz2").index("li") 将再次为 0。
@Terf 可以这样想：没有参数，.index() 让您询问第一个匹配元素相对于 DOM 结构的位置。带有一个参数，.index() 让你询问jQuery对象中选定元素的集合，与DOM无关。
感谢您的信息。我想我现在有了更好的理解。