1

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

TheProgrammer
  • 1,314
  • 5
  • 22
  • 44

6 Answers6

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

Jonast92
  • 4,964
  • 1
  • 18
  • 32
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>
Repeat Spacer
  • 373
  • 3
  • 17
  • 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