CODEWITHSUNDEEP
jqueryhtmlarraysfind
user1269625
user1269625

Reputation: 3209

jquery array total and find item index

I have this code here, what I am trying to do with jquery is get a total number of list items starting at 1 and find which index slideshow_currentView class is in.

For example, I have 38 items and slideshow_currentView is on item 7, I would like to display 7 / 38, I am completely new at jquery, just wondering if this is possible?

<div class="slideshow_pagination" style="display: block;">
<div class="slideshow_pagination_center">
<ul>
<li class="slideshow_transparent slideshow_currentView">
  <span style="display: none;">0</span>
</li>
<li class="slideshow_transparent "><span style="display: none;">1</span></li>
<li class="slideshow_transparent "><span style="display: none;">2</span></li>
<li class="slideshow_transparent "><span style="display: none;">3</span></li>
<li class="slideshow_transparent "><span style="display: none;">4</span></li>
<li class="slideshow_transparent "><span style="display: none;">5</span></li>
<li class="slideshow_transparent "><span style="display: none;">6</span></li>
<li class="slideshow_transparent "><span style="display: none;">7</span></li>
<li class="slideshow_transparent "><span style="display: none;">8</span></li>
<li class="slideshow_transparent "><span style="display: none;">9</span></li>
<li class="slideshow_transparent "><span style="display: none;">10</span></li>
<li class="slideshow_transparent "><span style="display: none;">11</span></li>
<li class="slideshow_transparent "><span style="display: none;">12</span></li>
<li class="slideshow_transparent "><span style="display: none;">13</span></li>
<li class="slideshow_transparent "><span style="display: none;">14</span></li>
<li class="slideshow_transparent "><span style="display: none;">15</span></li>
<li class="slideshow_transparent "><span style="display: none;">16</span></li>
<li class="slideshow_transparent "><span style="display: none;">17</span></li>
<li class="slideshow_transparent "><span style="display: none;">18</span></li>
<li class="slideshow_transparent "><span style="display: none;">19</span></li>
<li class="slideshow_transparent "><span style="display: none;">20</span></li>
<li class="slideshow_transparent "><span style="display: none;">21</span></li>
<li class="slideshow_transparent "><span style="display: none;">22</span></li>
<li class="slideshow_transparent "><span style="display: none;">23</span></li>
<li class="slideshow_transparent "><span style="display: none;">24</span></li>
<li class="slideshow_transparent "><span style="display: none;">25</span></li>
<li class="slideshow_transparent "><span style="display: none;">26</span></li>
<li class="slideshow_transparent "><span style="display: none;">27</span></li>
<li class="slideshow_transparent "><span style="display: none;">28</span></li>
<li class="slideshow_transparent "><span style="display: none;">29</span></li>
<li class="slideshow_transparent "><span style="display: none;">30</span></li>
<li class="slideshow_transparent "><span style="display: none;">31</span></li>
<li class="slideshow_transparent "><span style="display: none;">32</span></li>
<li class="slideshow_transparent "><span style="display: none;">33</span></li>
<li class="slideshow_transparent "><span style="display: none;">34</span></li>
<li class="slideshow_transparent "><span style="display: none;">35</span></li>
<li class="slideshow_transparent "><span style="display: none;">36</span></li>
<li class="slideshow_transparent "><span style="display: none;">37</span></li>
<li class="slideshow_transparent "><span style="display: none;">38</span></li>
</ul>
</div>
</div>

Upvotes: 0

Views: 346

Answers (2)

super
super

Reputation: 2328

Try this: 

$(document).ready(function () {
    $ul = $('.slideshow_pagination_center ul li').hide();
    alert("Length : "+$ul.length);
    $ul.each(function (){
        $(this).show();
        if ($(this).hasClass('slideshow_currentView')){
            alert("Index : "+$(this).find('span').text());
            return false;
        }
    });
});

Demo

Display only li has class slideshow_currentView Demo

Upvotes: 1

codingrose
codingrose

Reputation: 15699

Try this:

var total = 0;
$("li").each(function(){
    var n = parseInt($(this).text());
    if(n > 0){ //check if element is greater than 0
        total ++;
    }
});
var index = $(".slideshow_currentView").index()+1; //.index() gives index, starts from 0
alert("total:"+total+" current:"+index);

Fiddle here.

Upvotes: 2

Related Questions