Question

我一直试图找出如何在某个网站范围内搜索某个类的元素索引。不需要在整个网站范围内，但我必须可以用于祖先div。

我的标记如下：

<div class="custom-woo-gallery">
    <div class="row">
        <div class="gallery-item"></div>
        <div class="gallery-item"></div>
        <div class="gallery-item"></div>
    </div>
    <div class="row">
        <div class="gallery-item"></div>
        <div class="gallery-item"></div>
        <div class="gallery-item"></div>
    </div>
    <div class="row">
        <div class="gallery-item"></div>
        <div class="gallery-item"></div>
        <div class="gallery-item"></div>
    </div>
    <div class="row">
        <div class="gallery-item"></div>
        <div class="gallery-item"></div>
        <div class="gallery-item"></div>
    </div>
    <div class="row">
        <div class="gallery-item"></div>
        <div class="gallery-item"></div>
        <div class="gallery-item"></div>
    </div>
</div>

基本上点击.gallery-item元素，我需要找出共同祖先.gallery-item中有多少.custom-woo-gallery个元素。

我有以下代码，这是有用的。但我猜这是更简单的方法。除了index()和eq()之外，我似乎无法在谷歌上找到任何内容，而这些内容似乎只能在同一个父div中运行。

function getPrev(){
    var count = 0;
    $(clicked).parent().prevUntil().each(function(){
        count = count + $(this).children().length;
    })
    var self = $(clicked).prevUntil().length;
    return count + self;
}

Answer 1

试试这个解决方案。如果您只有一个custom-woo-gallery，则可以通过jQuery#index获取当前点击的gallery-item索引的索引。您可以在其前面找到多少.gallery-item个元素。

实际上，点击的div的index是他之前.gallery-item的号码。

const galleryItems = $('.gallery-item');

$('.gallery-item').on('click', function(){
  console.log(galleryItems.index($(this)));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-woo-gallery">
    <div class="row">
        <div class="gallery-item">1</div>
        <div class="gallery-item">2</div>
        <div class="gallery-item">3</div>
    </div>
    <div class="row">
        <div class="gallery-item">4</div>
        <div class="gallery-item">5</div>
        <div class="gallery-item">6</div>
    </div>
    <div class="row">
        <div class="gallery-item">7</div>
        <div class="gallery-item">8</div>
        <div class="gallery-item">9</div>
    </div>
    <div class="row">
        <div class="gallery-item">10</div>
        <div class="gallery-item">11</div>
        <div class="gallery-item">12</div>
    </div>
    <div class="row">
        <div class="gallery-item">13</div>
        <div class="gallery-item">14</div>
        <div class="gallery-item">15</div>
    </div>
</div>

在整个网站寻找元素索引

1 个答案: