Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

How To Access Li Elements Within Ul Tag

Post a Comment
I want to know how to access each li within the ul? I am not sure exactly what the name of the ul is. Here is the code:
    Copy

    If you're not sure that the ul will have the selectBox-options class, then delete the .selectBox-options part - but remember that it will get you every li on the page then.

    If you're using jQuery, then this is a bit more compatible, and does basically the same thing:

    var li =  $("ul.selectBox-options li");

Solution 2:

If you accept jQuery, like you mentioned:

$( "li" ).each(function( index ) {
    console.log( index + ": " + $(this).text() );
});

As the jQuery documentation declares.

I'm not sure how to do it with raw javascript though :)

Solution 3:

in CSS:

li { color:black; }

with ul:

ulli { }

or with class:

ulli.ommitted { }

or with ul&li class

ul.selectBox-optionsli.ommitted { }

ps. Don't forget the end tag 

</li>

Solution 4: 

<html><head><styletype='text/css'>.omitted {
        color:                  rgb(0, 0, 0);
        background:             transparent;
      }

      .selected {
        color:                  rgb(255, 255, 255);
        background:             rgb(0, 0, 0);
      }
    </style><scripttype='text/javascript'>functionmatchSelected(foo) {
        var selectBox =         document.getElementById('selectBox');
        var items =             selectBox.getElementsByTagName('LI');

        for(i=0; i<items.length; i++) {
          items[i].className =  items[i].innerHTML == foo ? 'selected' : 'ommitted';
        }
      }
    </script></head><body><ulid='selectBox'class='selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown'><liclass='omitted'>1</li><liclass='omitted'>3</li><liclass='omitted'>8</li><liclass='omitted'>10</li><liclass='omitted'>14</li></ul><selectonChange='matchSelected(this.value);'><optionvalue='1'>One</option><optionvalue='3'>Three</option><optionvalue='8'>Eight</option><optionvalue='10'>Ten</option><optionvalue='14'>Fourteen</option></select></body></html>

Solution 5:

You want like this? DEMO http://jsfiddle.net/yeyene/ZjHay/

$(document).ready(function(){
    $('select').on('change',function(){
        alert($('.selectBox-options li').eq($(this).val()-1).text());
    });
});

Post a Comment for "How To Access Li Elements Within Ul Tag"