Using javascript to access li elements within ul

Question

I am trying to build a program in which once the page loads it automatically adds a size. I have a bunch of li tags within a ul and I would like to know how exactly to access these li tags using JQuery.

I would usually use Document.getByName but the ul does not have an id.

Here is the complete code:

<div class="exp-pdp-size-dropdown-container selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown selectBox-dropdown-menu" style="display: block; top: 38px; left: 0px;">
<a class="selectBox exp-pdp-size-dropdown exp-pdp-dropdown selectBox-dropdown selectBox-menuShowing" style="display: inline-block;" title="" tabindex="0"><label class="exp-pdp-dropdown-label platform-font-1">SIZE</label><span class="selectBox-label">&nbsp;</span><span class="selectBox-arrow glyph-replace" data-glyph="j"></span></a>
<ul class="selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown" style=""><li class="exp-pdp-size-not-in-stock selectBox-selected" style=""><a rel=""></a></li><li class="exp-pdp-size-not-in-stock first-in-row upper-left"><a rel="3488377:6">
           6
        </a></li><li class="exp-pdp-size-not-in-stock"><a rel="3488378:6.5">
           6.5
        </a></li><li class="last-in-row upper-right"><a rel="3488379:7">
           7
        </a></li><li class="first-in-row"><a rel="3488380:7.5">
           7.5
        </a></li><li class=""><a rel="3488381:8">
           8
        </a></li><li class="last-in-row"><a rel="3488382:8.5">
           8.5
        </a></li><li class="first-in-row"><a rel="3488383:9">
           9
        </a></li><li class="exp-pdp-size-not-in-stock"><a rel="3488384:9.5">
           9.5
        </a></li><li class="last-in-row"><a rel="3488385:10">
           10
        </a></li><li class="first-in-row"><a rel="3488386:10.5">
           10.5
        </a></li><li class=""><a rel="3488387:11">
           11
        </a></li><li class="last-in-row"><a rel="3488388:11.5">
           11.5
        </a></li><li class="first-in-row"><a rel="3488389:12">
           12
        </a></li><li class="exp-pdp-size-not-in-stock"><a rel="3488390:12.5">
           12.5
        </a></li><li class="last-in-row"><a rel="3488391:13">
           13
        </a></li><li class="first-in-row lower-left"><a rel="3488392:14">
           14
        </a></li><li class="exp-pdp-size-not-in-stock last-in-row lower-right"><a rel="3488393:15">
           15
        </a></li></ul></div>

@JasonP Could you show exactly me how I would do that in this example? — TheProgrammer, Aug 01 '13 at 01:15
duplicate of [How to access li elements within ul tag](http://stackoverflow.com/questions/17982861/how-to-access-li-elements-within-ul-tag) - if you want to add information, please edit the post. — Bergi, Aug 01 '13 at 01:16
@DeVonte: You only said "*access*". Is there anything you want to *do* with the elements? — Bergi, Aug 01 '13 at 01:19
Are you asking how to add an li, or asking how to access an existing li? — apaul, Aug 01 '13 at 01:28
@Bergi Yes after I grab that li item I want to simulate a .click() — TheProgrammer, Aug 01 '13 at 01:33
I think you may need to edit your question and add details about precisely what it is you're trying to do, and why it is not working. As it stands now it reads like a tree traversal question and there are dozens of ways to do that... — apaul, Aug 01 '13 at 01:43

apaul · Answer 1 · 2013-08-01T02:03:50.517

1

You could use either .prepend() or .append()

Working Example

$('ul.selectBox-options').prepend('<li>Hello World</li>');
$('ul.selectBox-options').append('<li>Good bye World</li>');

Post Re-title:

Working Example 2

There are many ways to select an <li> within a <ul> here are a few:

$("ul.selectBox-options li:contains('8.5')").css('background', 'purple'); 
$('ul.selectBox-options li').first().css('background', 'yellow');
$('ul.selectBox-options li').last().css('background', 'orange');
$('ul.selectBox-options li:nth-child(2)').css('background','red');

edited Aug 01 '13 at 02:03

answered Aug 01 '13 at 01:16

apaul

16,092
8
47
82

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

ataravati · Accepted Answer · 2013-08-01T01:35:15.730

1

First, give an id to your <ul> tag, like this:

<ul id="myList" class="selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown" style="">

Then, use this jQuery code to loop through the <li> tags:

<script type="text/javascript">
  $(function() {
    var listItems = $("#myList li");
    listItems.each(function(i, li) {
      var listItem = $(li);
      // some code
    });
  });
</script>

Or, if you don't want to give an id to the <ul> tag, you can just use its class like this:

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

edited Aug 01 '13 at 01:35

answered Aug 01 '13 at 01:18

ataravati

8,891
9
57
89

is there a way to just access the class name without adding an id – TheProgrammer Aug 01 '13 at 01:22
Thanks! And how would I make listItems an array? – TheProgrammer Aug 01 '13 at 01:30
Like this: `$('ul.selectBox-options li').toArray();` – ataravati Aug 01 '13 at 01:35
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:18

score 1 · Answer 3 · answered Aug 01 '13 at 01:20

You can using appendChild:

JAVASCRIPT:

var ul = document.getElementById("test");
var addLi = document.createElement("li");
ul.appendChild(addLi);
addLi.innerHTML = "Second li";

Demo: http://jsfiddle.net/QzYm4/2/

Node.appendChild: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

score 0 · Answer 4 · answered Aug 01 '13 at 01:27

0

The selector I'm using to get the ul tag is the first class value you have in your code, if you want to apply this selector only to one ul tag, you have to add an id attr to the ul tag and then something like this // $('#yourID li').size();

$(document).ready( function(){
    var count_Li = $('.selectBox-options li').size();
    alert(count_Li);

    $('.selectBox-options li').each( function(){
        alert($(this).text());
    });
});

answered Aug 01 '13 at 01:27

mocampo

1

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

Using javascript to access li elements within ul

4 Answers4