我想知道如何访问 ul 中的每个 li？我不确定 ul 的确切名称是什么。
代码如下：
<ul class= "selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown" style>
<li class = " omitted">
more li here omitted
</ul>
我的主要目标是让用户在下拉菜单中点击一个尺寸，比如说尺寸 8，它会自动检测 ul 中的特定 li(8)
【问题讨论】：
ul li?为什么这不起作用？
标签： javascript jquery html css
你可以使用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 { }
或与类：
ul li.ommitted { }
或使用 ul&li 类
ul.selectBox-options li.ommitted { }
ps。不要忘记结束标签
</li>
【讨论】：
<li> 的结束标签是可选的。
<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>
【讨论】：
你想要这样吗？演示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
<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 ];
});
}
（以上代码可能不是开箱即用的跨浏览器兼容，请记住使用工作代码。）
在上面的代码中，我们首先得到select元素和ul的子元素（lis）。然后我们将一个匿名函数（也可以命名）映射到selects change 事件（每次选择一个选项时都会触发该事件）。然后，此函数从我们在第二行获取的项目集合中选择正确的 li 项目并将其分配给名为 selected_li 的变量。
现在您可以随意操作和使用selected_li。
编辑：使用 jQuery，这项工作可能会更容易一些。
【讨论】：