'Find index of element within a list of elements with the same class

I have a div:

<div class="container">
    <div class="info" style="display:block;"></div>
    <div class="result-image-slides"></div>
    <div class="result-image-slides"></div>        
    <div class="result-image-slides" style="display:block;"></div>        
    <div class="result-image-slides"></div>
    <div class="prev_img"></div>
</div>
<div class="container">
    <div class="info" style="display:block;"></div>
    <div class="result-image-slides" style="display:block;"></div>
    <div class="result-image-slides"></div>        
    <div class="result-image-slides"></div>        
    <div class="result-image-slides"></div>
    <div class="prev_img"></div>
</div>

and I have a jquery onclick

$('.prev_img').on('click', function(e) {

    // Get the count of siblings with the class 'result-image-slides'
    var count = $(this).siblings('div.result-image-slides').length;
    var slideIndex = $(this).siblings('div.result-image-slides:visible').index();

    showSlides(-1, count, $(this).siblings('div.result-image-slides'), slideIndex);
})

that gets the count of the siblings and tries to get the index of the sibling that has been clicked. The issue is that when I do the index() it seems to count the firsat div (with the class "info") as well.

I've tried the following:

$(this).siblings('div.result-image-slides:visible').index()

and

$(this).siblings('div.result-image-slides').index('div.result-image-slides:visible')

however it always seems to include the first div, leading to the wrong index.

Am I missing something here? How can I only get the index of a div within a list of 'div's with the same class.

For example with the above html for the first container when I click prev_img the index of the visible element would be 2 not 3.

EDIT: By default the divs are hidden with display:none

Adding to this: I have the same functionality on a different page however that container doesn't have a child with the class info. When the above jquery runs, and (for example) the visible item is the first div, it returns an index of 0 however for above if the first element is visible, it returns 1. This makes me believe it's counting the first element as well as the ones with the classes I'm checking against;

EDIT 2: So I've figured out how to solve this issue but it's not really the best solution.

    var arr = [];
    var slideIndex = 0;
    arr = $(this).siblings('div.result-image-slides');

    for (var i = 0; i < arr.length; i++) {
        if (arr[i].style.display == 'block') {
            slideIndex = i;
            break;
        }
    }
    var count = $(this).siblings('div.result-image-slides').length;

    showSlides(-1, count, $(this).siblings('div.result-image-slides'), slideIndex);

To only get the index of the visible div in regards to the classes I want to check against, I've added the siblings to an array and looped through it, setting the slideIndex based off that

htmljquery


Solution 1:[1]

Since it's been a few days and no answer has been provided that corrects this issue, I will add this as the answer.

var arr = [];
var slideIndex = 0;
arr = $(this).siblings('div.result-image-slides');

for (var i = 0; i < arr.length; i++) {
    if (arr[i].style.display == 'block') {
        slideIndex = i;
        break;
    }
}
var count = $(this).siblings('div.result-image-slides').length;

showSlides(-1, count, arr, slideIndex);

We add the siblings to a js array and get the index that way. This means that it should never count any siblings that do not contain the correct class.

Solution 2:[2]

In your snippet all <div>s were visible, so the first visible one had the index 1 which is the second child element in the parent's collection. I added some CSS to make the .result-image-slides divs invisible by default. Only the third .result-image-slides is visible now. Its index is 2. And this index is returned when we use the .index() function in a slightly different way:

$('.prev_img').on('click', function(e) {
    // Get the count of siblings with the class 'result-image-slides'
    var indx = $(this).siblings('.result-image-slides:visible').index(".result-image-slides");
    console.log(indx);
    // showSlides(-1, count, $(this).siblings('div.result-image-slides'), slideIndex);
})
.result-image-slides {display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="info">info</div>
    <div class="result-image-slides">one</div>
    <div class="result-image-slides">two</div>        
    <div class="result-image-slides" style="display:block">three</div>        
    <div class="result-image-slides">four</div>
    <div class="prev_img">click here</div>
</div>

$.index() returns the element's index within the parent's .children collection, irrespective of whether the siblings match the selector .result-image-slides or not. But when we do

$(this).siblings('.result-image-slides:visible').index(".result-image-slides");

We first look for the first .result-image-slides:visible div and get its index relative the the first occurrence of a .result-image-slides element in the parent's .children collection. The index here has to be and is: 2.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 JamesS
Solution 2 Carsten Massmann

Related Questions