trouver l'index de l'élément à l'échelle du site

Question

J'ai essayé de trouver comment faire une recherche sur l'ensemble du site pour un index d'éléments d'une certaine classe. N'a pas à sitewide, mais je dois être utilisable pour un div ancêtre.

Mon balisage est la suivante:

<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> 

Fondamentalement, un élément .gallery-item est cliqué et j'ai besoin de savoir combien il .gallery-item éléments dans l'ancêtre précède commun .custom-woo-gallery.

J'ai le code suivant, qui est fonctionnel. Mais je suppose qu'il y a un moyen plus simple de le faire. Je ne peux pas sembler trouver quelque chose sur google autre que index() et eq() qui semble seulement fonctionner dans le même div parent.

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

Essayez cette solution. Si vous n'avez qu'un seul custom-woo-gallery, vous pouvez obtenir l'index de l'index actuellement cliqué gallery-item via jQuery#index. Et vous pouvez trouver combien d'éléments .gallery-item le précède.

En fait, le index du div cliqué est le numéro de son précédent .gallery-item s.

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>