jquery find index of element with selector

Question

I'm trying to use .index() function of jQuery and I can figure out how it works. Results are not what I expect them to me. Here is a little exemple of why I don't get it :

Html :

<div id="gallery">
  <div class="gallery-item">item 1</div>
  <div class="gallery-item active">item 2</div>
  <div class="clearfix visible-lg"></div>
  <div class="gallery-item">item 3</div>
  <div class="gallery-item">item 4</div>
</div>

<div id="buttons">
  <button id="next">next</button>
</div>
<span id="console">
</span>

JS :

    jQuery( document ).ready(function( $ ) {

    $("#buttons > #next").click(function (){
        var items = $(".gallery-item");

        var index = items.find(".active").index();
        $("#console").append("index : " + index + "<br />");

        var indexWithSelector = items.index(".active");
        $("#console").append("index with selector : " + indexWithSelector + "<br />");

        var prevAll = items.prevAll(".gallery-item").size();
        $("#console").append("prevall : " + prevAll + "<br />");

        $.each(items, function(index, val) {
            $("#console").append("<br />" + val.className);
        });
    });

});

I expect all results to be the same : 1 as the active element is the second in a zero-based list. But I get this :

index : -1
index with selector : -1
prevall : 3

gallery-item
gallery-item active
gallery-item
gallery-item

Why? Am I doing something wrong?

Here it is on CodePen : http://codepen.io/anon/pen/meiBA

Update :

I tried to find the active element directly and use index to find it's position and it worked. I tried this :

var active = $(".gallery-item.active");
var index = items.index(active);
//index == 1

Mech · Accepted Answer · 2020-08-12 02:48:21Z

3

I have tested your code in jsfiddle .I found that you are getting -1 because the element index that you are trying to find doesnt exist in that context :

 var items = $(".gallery-item");        
 var index = items.find(".active").index();

Here items.find will return nothing but empty jquery object.You are trying to find the active class in the child items of the gallery item .But active class is at same level of other gallery-item.So the code should be like this :

 var index = items.filter(".active").index();

That is the reason you was getting this -1 .As there was no element so index was returning as -1.

index : -1

Now lets talk about this :

index with selector : -1

The reason behind this -1 is the following code :

var indexWithSelector = items.index(".active");

Here you are finding the $(".gallery-item") in collection of .active class.Which is making no sense. As .active is the part of gallery-item.

The search should be like this :

 var indexWithSelector = items.filter(".active").index(".gallery-item");

Now lets check the following code :

var prevAll = items.prevAll(".gallery-item").size();

Here you are trying to get size of all previous items.Where the size of items is 4 i.e of $(".gallery-item") and its returning you the size 4-1 = 3 which is correct.

If you was trying to get the prev gallery-item of active class then code should be :

var prevAll = items.filter(".active").prevAll(".gallery-item").size();

So the correct output will look like :

index : 1 
index with selector : 1
prevall : 1

And last but not the least here is the jsfiddle.I commented your code as well so that you can comment mine and check the effect :

DEMO : JS FIDDLE

edited Aug 12, 2020 at 2:48

Mech

4,0352 gold badges17 silver badges26 bronze badges

answered Apr 21, 2014 at 12:34

surajRahel

2661 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David Over a year ago

Thanks for the complete answer. I guess I was misusing both the find and index function. And I didn't know prevAll would wrap around the list. Thanks a lot.

David Over a year ago

It's a little weird that I can find the active object, pass it in the index function on the items collection and make it works when I can't use the selector. Intuition would lead me to believe that .index("with a selector") on a collection would give me the index of the first element matching the selector within the collection on which the method is called.

surajRahel Over a year ago

I would suggest you to check the api of index ( selectors) .it will give u a clear picture .that the selector Here is collection of elements and we check the index of element from that collection .hope I answered your question

surajRahel Over a year ago

I would suggest you to check the api of index ( selectors) .it will give u a clear picture .that the selector Here is collection of elements and we check the index of element from that collection .hope I answered your question

Bhojendra Rauniyar · Accepted Answer · 2014-04-21 11:38:10Z

0

var index = items.find(".active").index(); wouldn't work because find() methods finds it's contents not it's class so you can use hasClass() method:

var index = items.hasClass(".active").index();

answered Apr 21, 2014 at 11:38

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

1 Comment

David Over a year ago

That wouldn't work has hasClass would return a boolean.

Ravi Kumar · Accepted Answer · 2014-04-21 11:52:59Z

0

You should use

items.index($("div.active"));

instead of

items.find(".active").index();

here is a working example - http://jsfiddle.net/rMLNH/1/

answered Apr 21, 2014 at 11:52

Ravi Kumar

9931 gold badge12 silver badges39 bronze badges

2 Comments

David Over a year ago

That makes it work, now can you tell me why index("with a selector"); isn't doing it for me?

Ravi Kumar Over a year ago

actually items.index($("div.active")); says find the index of $("div.active") (which is jQuery element) in items. but items.find(".active").index(); says find('.active') (which is a html dom element not a jquery element) in items. So difference is jquery element vs simple dom element.

Collectives™ on Stack Overflow

jquery find index of element with selector

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related