Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post

    How to find an element based on its attribute

    Hello,

    I have a <ul> element in which I use JS to place a number of <li> elements. These <li> elements have an attribute called 'index' which I use to jump around to different html pages.

    HTML page.
    Code:
    <div id="scrubber">
    			<ul id="scrubberList">
    			<!--This is where the tick marks go for the page scrubber on the console.-->
    			</ul>
    </div>

    Code:
    function createScrubberTicks(){
    	for(i=0; i< pages_arr.length; i++){
    		$('#scrubberList').append('<li><span id="' + pages_arr[i].title + '" index="' + i + '" class="scrubberBtn">'</span></li>');
    	}
    
        $('.scrubberBtn')
            .click(function(){
    			$(this).removeClass("scrubberBtn").addClass("scrubberBtnSelected").parent().siblings().children().removeClass('scrubberBtnSelected').addClass('scrubberBtn');
    			current_pg_ind = this.getAttribute("index");
    			$("#dev_current_pages").text(parseInt(current_pg_ind) + 1);
    			requestPage(current_pg_ind);
            })
    }
    And now I need to find the <li> element with the correct index so that I can remove/add the class similar to above. The alert below does not work by the way.

    How can I reference the correct <li> element based on this index number? (There can be up to 80 of these <li> elements)
    Code:
    function setScrubberIndex()
    {
    	alert($("#scrubberList").getAttribute("index"));
    }

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    1. I think your append string is badly formed - shouldn't it be like this?
    Code:
    $('#scrubberList').append('<li><span id="' + pages_arr[i] + '" index="' + i + '" class="scrubberBtn"></span></li>');
    2. I think you are better off using the native jQuery attr
    Code:
    alert($("#scrubberList").attr("index"));
    3. The scrubberList has no index, it is the li's that you append to it. Have a look at DOM transversal methods like nextAll() and children()

  • #3
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post
    Thanks for the help.

    In case anyone needs this, here is what I ended up using.

    Code:
    	$("#scrubberList li span[index]").filter(function() { return $(this).attr('index'); }).each(function()
    	{
    		//alert("In the wierd function.");
    		if($(this).attr("index") == parseInt(current_pg_ind))
    		{
    			$(this).removeClass("scrubberBtn").addClass("scrubberBtnSelected").parent().siblings().children().removeClass('scrubberBtnSelected').addClass('scrubberBtn');
    			return false;;
    		}
    	});

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,350
    Thanks
    11
    Thanked 589 Times in 570 Posts
    Code:
    $("#scrubberList li span[index='"+ parseInt(current_pg_ind)+"']")
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

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