How to access li elements within ul tag

Question

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:

<ul class= "selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown" style>
    <li class = " omitted">
        more li here omitted
 </ul>

My main goal is to have a user click a size in a dropdown lets say size 8 and it will automatically detect that specific li(8) inside the ul

I think you should read the answer of this question : "[Get all LI elements in array](http://stackoverflow.com/questions/4019894/get-all-li-elements-in-array)". (you must add an id inside your ul element.) — aloisdg, Jul 31 '13 at 23:57
@Dallo Is there a way to do that method without adding an Id? — TheProgrammer, Aug 01 '13 at 00:02
You could also identify the UL by its class name and/or its parent element. We can't tell how feasible that is from the information you've given us. — Brilliand, Aug 01 '13 at 17:59

score 3 · Answer 1 · answered Jul 31 '13 at 23:45

3

You could use querySelectorAll:

var array_of_li =  document.querySelectorAll("ul.selectBox-options li");

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");

answered Jul 31 '13 at 23:45

Brilliand

13,404
6
46
58

So my main objective is for a website that when a user clicks a size lets say 8 it will automatically select that specific li pointing to 8 inside the ul. Is there a way to use .click() with this? – TheProgrammer Jul 31 '13 at 23:50
Look at comment I left above – TheProgrammer Jul 31 '13 at 23:51
Clicks a what? Yes, click can be used with this, but what the code is like would depend on what is being clicked on. – Brilliand Aug 01 '13 at 15:33
http://stackoverflow.com/questions/17996231/selecting-a-value-from-drop-down-box-using-li-elements-within-ul – TheProgrammer Aug 01 '13 at 15:39
So this is really about a jQuery UI dropdown? Then you shouldn't be doing what this question is asking at all. Use the jQuery UI methods to tell the dropdown what value it should be set to. – Brilliand Aug 01 '13 at 15:55

score 0 · Answer 2 · answered Jul 31 '13 at 23:44

0

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 :)

answered Jul 31 '13 at 23:44

Jonast92

4,964
1
18
32

Repeat Spacer · Answer 3 · 2013-08-01T00:01:12.723

0

in CSS:

li { color:black; }

with ul:

ul li { }

or with class:

ul li.ommitted { }

or with ul&li class

ul.selectBox-options li.ommitted { }

ps. Don't forget the end tag

</li>

edited Aug 01 '13 at 00:01

answered Jul 31 '13 at 23:55

Repeat Spacer

373
3
17

The end tag for `
` is optional.

Brilliand

Aug 01 '13 at 18:10

So it seems, thanks for info. I used to do xhtml, in which you always have to close and have been doing that for nothing after html5. Luckily my IDE auto-comlete html tags, so did not lose much time doing that. Down side is that user lose quite an amount of bandwidth while downloading my optional end tag. Sorry I was not able to answer your question in first place. Hope you get this work. – Repeat Spacer Aug 01 '13 at 19:01

Shylo Hana · Answer 4 · 2013-08-01T01:17:38.133

<html>
  <head>

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

      .selected {
        color:                  rgb(255, 255, 255);
        background:             rgb(0, 0, 0);
      }
    </style>

    <script type='text/javascript'>
      function matchSelected(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>


    <ul id='selectBox' class='selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown'>
      <li class='omitted'>1</li>
      <li class='omitted'>3</li>
      <li class='omitted'>8</li>
      <li class='omitted'>10</li>
      <li class='omitted'>14</li>
    </ul>


    <select onChange='matchSelected(this.value);'>
      <option value='1'>One</option>
      <option value='3'>Three</option>
      <option value='8'>Eight</option>
      <option value='10'>Ten</option>
      <option value='14'>Fourteen</option>
    </select>


  </body>
</html>

score 0 · Answer 5 · answered Aug 01 '13 at 04:30

0

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());
    });
});

answered Aug 01 '13 at 04:30

yeyene

7,297
1
21
29

score 0 · Answer 6 · answered Aug 01 '13 at 05:50

If the select and the ul are siblings inside the same parent element (a div for instance), you can use querySelector and querySelectorAll to select the proper ul element and its children.

HTML

<div id="container">

    <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>

</div>

JavaScript

var select = document.querySelector( "#container > select" );
var ul_children = ul_list.querySelectorAll( "#container > select ~ ul > li" );
var selected_li = undefined; // Undefined for now, see below for setting its value.

// If we got results for both select and ul_children.
if ( select !== null && ul_children.length > 0 )
{
    // Map function to the select's "change" event to pick a correct list item.
    select.addEventListener( "change", function( event )
    {
        // Get the select's value after changing the option.
        var selected = select.value;

        // Decrement with 1 to fix offset (ul_children starts from 0).
        selected--;

        // use the select's value to choose the right list item from the li collection.
        selected_li = ul_children.childNodes[ selected ];
    });
}

(Above code is probably not cross-browser compatible out of the box, remember to use working code.)

In the above code, we first get the select element and the ul's child elements (lis). Then we map an anonymous function (could be named too) to the selects change event (which is triggered each time an option is chosen with it). This function then selects the proper li item from the item collection we fetched in line two and assign it to a variable called selected_li.

Now you can manipulate and use the selected_li however you want.

EDIT: with jQuery this job is probably a bit easier.

Here is a more detailed example of what I want to do http://stackoverflow.com/questions/17996231/selecting-a-value-from-drop-down-box-using-li-elements-within-ul — TheProgrammer, Aug 01 '13 at 14:15

How to access li elements within ul tag

6 Answers6

Linked