CODEWITHSUNDEEP
javascriptjqueryhtmlcss
TheProgrammer
TheProgrammer

Reputation: 1344

How to access li elements within ul tag

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

Upvotes: 1

Views: 24715

Answers (6)

ojrask
ojrask

Reputation: 2828

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.

Upvotes: 0

yeyene
yeyene

Reputation: 7380

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

Upvotes: 0

Shylo Hana
Shylo Hana

Reputation: 1870

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

Upvotes: 0

Repeat Spacer
Repeat Spacer

Reputation: 383

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>

Upvotes: 0

Brilliand
Brilliand

Reputation: 13724

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

Upvotes: 3

Jonast92
Jonast92

Reputation: 4967

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

Upvotes: 0

Related Questions