Befund Index des Elements der gesamten Site

Question

Ich habe versucht, herauszufinden, wie man eine Site-weite Suche nach einem Elemente Index einer bestimmten Klasse zu tun. Muss nicht auf der ganzen Welt sein, aber ich muss für ein Ahnen Div nützlich sein.

Meine Markup ist die folgende:

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

Im Grunde ein .gallery-item Element geklickt wird, und ich brauche, um herauszufinden, wie viele .gallery-item Elemente vorausgeht es in dem gemeinsamen Vorfahren .custom-woo-gallery.

Ich habe den folgenden Code, der funktionsfähig ist. Aber ich denke, es gibt einen einfacheren Weg, dies zu tun. Ich kann einfach nicht scheinen, nichts auf Google zu finden andere als index() und eq() das scheint nur innerhalb der gleichen Eltern div zu arbeiten.

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

Versuchen Sie diese Lösung. Wenn Sie nur eine custom-woo-gallery haben, können Sie den Index des aktuellen bekommen geklickt gallery-item ‚s Index über jQuery#index. Und Sie können feststellen, wie viele wie viele .gallery-item Elemente davor stehen.

Eigentlich ist die index der angeklickt div die Nummer seiner vorherigen .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>