jQuery 元素 .index() 在不同容器中的位置

Question

我需要获取共享 class 的元素的索引，它位于容器内，代码示例：

<div id="mycontainer">
    <div class="column">Text here</div>
    <div class="column">Text here</div>
    <div class="column">Text here</div>
    <div class="column">Text here</div>
</div>
<div id="mycontainer2">
    <div class="column">Text here</div>
    <div class="column">Text here</div>
    <div class="column">Text here</div>
</div>

我在 jQuery API 上阅读了 .index() 你使用它就像： $("selector").index(this); 这一切都很好。

现在，如果我不知道.column个元素的长度在某个点停止计算索引，我怎么知道包含它们的每个容器的第一个索引？我的意思是，第一列为 0，第二列为 1，第三列为 0 用于另一个容器，第四列为 1。

我需要知道它，因为当鼠标进入一个列时，它会应用一些样式，每个容器的第一个和最后一个具有不同的样式。如果我有一个容器，知道它没有问题，但是当有多个容器时，问题就来了。

添加

我有一个 class 可以增加 15% 的宽度。现在，如果它是每个容器的第一个，它就剩下 left: 0%，如果它是最后一个，它就是 left: 85%;。但是，如果鼠标所在的列指向不同的列，它会执行代码以添加 15% 并使列居中。

对于页面中的一个容器来说，所有这些都非常有用，但如果我添加第二个容器，第一个容器中最后一列的索引不是 column class，所以它不会添加 left: 85%;，第二个容器的第一个也会发生同样的情况。

Answer 1

如 .index() doc 所述：

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

所以简单地做 $(this).index() 会给你元素索引 ammoung 它的兄弟姐妹。换句话说，它的子位置。

jQuery 元素 .index() 在不同容器中的位置

jQuery element .index() position inside different containers

javascript

indexing

jquery

position