jquery index by class

Question

I would like to know the index of the li elements, just which has a certain class.

<ul>
    <li style="display: none;">don't need this one</li>
    <li class="li">sdsds</li>
    <li class="li">sdsds</li>
    <li class="li">sdsds</li>
</ul>

$('ul').each(function () {
    $(this).on('click', 'li.li', function () {
        alert($(this).index());
    });
});

http://jsfiddle.net/oobkzyat/2/

My problem is that the index is not starting with 0. How can I do it?

Subtract the number one? The problem is if you remove arbitrary elements the list of elements returned will only be the ones you've selected. If you need an unchanging value when the DOM you're picking from can change then either select a different way, or use a data- attribute, or... etc. — Dave Newton
– Dave Newton, Commented Jun 22, 2015 at 19:09

Raj · Accepted Answer · 2015-06-22 19:22:49Z

2

Either element displays or not. It will be a part on the index that's the reason it gives you 1 instead 0 because 0 is the index of the element you hid (<li style="display: none;">don't need this one</li>) . However below is code for your requirement.

$('ul').each(function () {
    $(this).on('click', 'li.li', function () {
      alert($(this).index()-$(this).prevAll(":hidden").length);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
    <li style="display: none;">don't need this one</li>
    <li class="li">sdsds</li>
    <li class="li">sdsds</li>
    <li class="li">sdsds</li>
</ul>

answered Jun 22, 2015 at 19:22

Raj

5705 silver badges15 bronze badges

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

Comments

pmrotule · Accepted Answer · 2015-06-23 19:31:49Z

1

If you look at the documentation, you will notice the other way to use index() : .index() can search for this list item within the set of matched elements. Here's an example how to use it:

$('ul').each(function () {
  
  var classLi = $(this).find('> li.li');
  // get direct children with class "li"
  
  classLi.on('click', function () {
    alert(classLi.index(this));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
    <li style="display: none;">don't need this one</li>
    <li class="li">sdsds</li>
    <li class="li">sdsds</li>
    <li class="li">sdsds</li>
</ul>

edited Jun 23, 2015 at 19:31

answered Jun 23, 2015 at 18:59

pmrotule

9,7804 gold badges54 silver badges59 bronze badges

Comments

Kunal Pradhan · Accepted Answer · 2015-06-22 19:20:43Z

0

You need to query for visible elements using :visible selector.

alert($(this).siblings(":visible").andSelf().index(this));

I have updated your fiddle http://jsfiddle.net/oobkzyat/3/

answered Jun 22, 2015 at 19:20

Kunal Pradhan

5101 gold badge5 silver badges12 bronze badges

Comments

nurdyguy · Accepted Answer · 2015-06-22 19:38:07Z

0

Your index is starting at 1 because the 0 element does not have class="li" on it. The first element returned is the first class="li" but that is the SECOND li in the ul.

EDIT: If there are several (unknown number) hidden li that you want to ignore, you could do something like this

    $('ul').on('click', 'li.li', function(){
      var counter = 0;
      var clickIndex = $(this).index();
      // uses an ID on the ul in case there are other li on page
      $('#topUL').find('li').each(function(){
          if( $(this).index() < clickIndex && !$(this).hasClass('li') )
             counter++;
      });
      alert(clickIndex - counter);

    });

edited Jun 22, 2015 at 19:38

answered Jun 22, 2015 at 19:12

nurdyguy

2,9433 gold badges29 silver badges33 bronze badges

2 Comments

levipadre Over a year ago

I know, but I would like to 'lie', that the first li.li index is 0. This is just an example, the task is more complex.

nurdyguy Over a year ago

Well, if you know there is always one above it then subtract 1. If you don't know how many are above it then you'll have to get sneakier. Is this the case?

Collectives™ on Stack Overflow

jquery index by class

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related