0

How can I get the index of the list that is visible in jQuery and store it in a variable? So for the instance slideshow below:

  1. I create a variable currSlides.
  2. I store the index of the visible li into currSlides
  3. currSlides should output as 3.

  4. I will use that number to manipulate the slides.

    <ul class="slides-container">
  <li style="display:none">Image 1</li>
  <li style="display:none">Image 2</li>
  <li>Image 3</li>
  <li style="display:none">Image 4</li>
</ul>
Reza San
  • 200
  • 2
  • 12
  • What do you mean by "get the eq"? – Heretic Monkey Feb 20 '17 at 03:42
  • 3
    Possible duplicate of [How do I check if an element is hidden in jQuery?](http://stackoverflow.com/questions/178325/how-do-i-check-if-an-element-is-hidden-in-jquery) (which is the duplicate of [Detect if an element is visible](http://stackoverflow.com/q/8774089/215552)) – Heretic Monkey Feb 20 '17 at 03:45
  • Mike I'm not detecting if element is visible and I don't see that as a duplicate. I've reworded my question. Appreciate if you could help me if you're willing to. Thanks. – Reza San Feb 20 '17 at 04:00
  • Try index method in jQuery object as my answer below. – Duong Dang Feb 20 '17 at 04:07

2 Answers2

2

This should work.

var currSlides  = $('.slides-container').find('li:visible');

And also this 

var currSlides = $('.slides-container li:visible');

Demo

Suresh Atta
  • 114,879
  • 36
  • 179
  • 284
1

Try this:

var currSlides  = $('.slides-container li').index($('.slides-container li:visible'));


var currSlides  = $('.slides-container li').index($('.slides-container li:visible'));

alert(currSlides);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides-container">
  <li style="display:none">Image 1</li>
  <li style="display:none">Image 2</li>
  <li>Image 3</li>
  <li style="display:none">Image 4</li>
</ul>
Duong Dang
  • 349
  • 1
  • 9