如何访问ul标签中的li元素
我想知道如何访问ul中的每个li？ 我不确定ul的名字到底是什么。
这是代码：
我的主要目标是让用户点击下拉列表中的大小，比如大小为8，它会自动检测ul内的特定li（8）
您可以使用querySelectorAll ：
var array_of_li = document.querySelectorAll("ul.selectBox-options li");
如果您不确定ul将具有selectBox-options类，那么删除.selectBox-options部分 – 但请记住，它会在页面上为您提供每个li 。
如果你正在使用jQuery，那么它会更兼容，并且基本上做同样的事情：
var li = $("ul.selectBox-options li");
如果您接受jQuery，就像您提到的那样：
$( "li" ).each(function( index ) { console.log( index + ": " + $(this).text() ); });
正如jQuery documentation声明的那样。
我不知道怎么用原始的javascript做:)
在CSS中：
li { color:black; }
用ul：
ul li { }
或与class级：
ul li.ommitted { }
或者使用ul＆li类
ul.selectBox-options li.ommitted { }
PS。 不要忘记结束标记
你想要这样吗？ 演示http://jsfiddle.net/yeyene/ZjHay/
$(document).ready(function(){ $('select').on('change',function(){ alert($('.selectBox-options li').eq($(this).val()-1).text()); }); });
如果select和ul是同一父元素（例如div ）中的兄弟，则可以使用querySelector和querySelectorAll来选择正确的ul元素及其子元素。
HTML
- Item 1
- Item 2
- Item 3
- Item 4
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 ]; }); }
（上面的代码可能不是开箱即用的跨浏览器兼容，记得使用工作代码。）
在上面的代码中，我们首先得到select元素和ul的子元素（ li s）。 然后我们将一个匿名函数（也可以命名）映射到select s change事件（每次选择一个选项时都会触发它）。 然后，此函数从我们在第二行中获取的项集合中选择正确的li项，并将其分配给名为selected_li的变量。
现在，您可以根据需要操作和使用selected_li 。
编辑：使用jQuery这项工作可能会更容易一些。