SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question jQuery: Getting a count of LIs

    Hello

    I wanted to get a count of all the LIs until <li id="end">Test </li>


    So the alert should prompt 7 instead of 12. I am trying the following code but does not seem to work. The code is prompting me 1. Can you pls help me?

    Code:
    <script src="jquery.js"></script>
    
    <script>
    	
    	$(document).ready(function(){
    	
    		var xx = $('ul li#end').length;
    		
    		alert(xx);
    	
    	});
    
    
    </script>
    
    <ul>
    	<li>Test </li>
    	<li>Test </li>
    	<li>Test </li>
    	<li>Test </li>
    	<li>Test </li>
    	<li>Test </li>
    	<li id="end">Test </li>
    	<li>Test </li>
    	<li>Test </li>
    	<li>Test </li>
    	<li>Test </li>
    	<li>Test </li>						
    </ul>
    Thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://jsfiddle.net/VTWPL/

    It shows 6 because the first is the index zero

  3. #3
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    So even if I do

    var xx = $('ul li#end').index();

    It shows 6.

    1) May I know why did you add the extra > after ul?
    2) Whats the difference between length and index()?


    Thanks

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cancer10 View Post
    So even if I do

    var xx = $('ul li#end').index();

    It shows 6.

    1) May I know why did you add the extra > after ul?
    2) Whats the difference between length and index()?
    It shows 6 as JavaScript uses arrays whose index starts at 0 (as do many other C-based languages).

    The extra ">" is a CSS selector that says "Only select the next element if it is a direct child" ... in this case it's saying "only select li#end if it is a direct child of ul". Additionally in this example the immediate-child operator is superfluous as the <li> in question has an ID and <li>'s always need to be a direct child of a <ul>. In fact, in this example, because your <li> has an ID, you could even leave the "ul " part of the selector off completely.

    The difference between .length and .index() is that .length is a native JavaScript property of Arrays. It will return the length of the array. So when you did your initial selection of $("ul li#end") jQuery was only returning one element, and thus the length property was 1.

    .index() is a jQuery method that will return the index of an element relative to its sibling elements
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the detailed explanation.

  6. #6
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Also, is there anyway to find out the total number of LIs after <li id="end">Test </li> ?

    So it should be 5 in the above case.


    Thanks.

  7. #7
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yeah, should be easy. You could get the index of #end and subtract if from the total.

    So something like
    Code:
    $('ul li').length - $('ul li#end').index();
    
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  8. #8
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks that works.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •