Javascript 如何访问ul标签中的li元素

我想知道如何访问ul中的每个li？我不确定ul的确切名称

代码如下：

<ul class= "selectBox-options exp-pdp-size-dropdown exp-pdp-dropdown" style>
    <li class = " omitted">
        more li here omitted
 </ul>

这里省略了更多的李

---

我的主要目标是让用户在下拉列表中单击一个大小（比如大小8），如果您接受jQuery，它将自动检测ul中的特定li（8），如您所述：

$( "li" ).each(function( index ) {
    console.log( index + ": " + $(this).text() );
});

正如jQuery声明的那样

---

但是我不知道如何使用原始javascript：）

您可以使用

querySelectorAll

：

var array_of_li =  document.querySelectorAll("ul.selectBox-options li");

如果您不确定

ul

是否具有

selectBox options

类，请删除

.selectBox options

部分-但请记住，它将为您提供页面上的每个

li

如果您使用的是jQuery，那么它的兼容性会更好一些，并且基本上做了相同的事情：

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

在CSS中：

li { color:black; }

与ul合作：

ul li { }

或与班级一起：

ul li.ommitted { }

或ul&li等级

ul.selectBox-options li.ommitted { }

注：别忘了结尾标签

</li>

.省略{
颜色：rgb（0,0,0）；
背景：透明；
}
.选定{
颜色：rgb（255、255、255）；
背景：rgb（0,0,0）；
}
已选择函数匹配（foo）{
var-selectBox=document.getElementById（'selectBox'）；
var items=selectBox.getElementsByTagName（'LI'）；
对于（i=0；i你想要这样吗？演示

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

（以上代码可能不是现成的跨浏览器兼容代码，请记住使用工作代码。）

在上面的代码中，我们首先获取
select
元素和
ul
的子元素（
li
s）。然后我们将一个匿名函数（也可以命名）映射到
select
s
change
事件（每次选择选项时都会触发该事件）。然后，此函数从第二行获取的项目集合中选择适当的
li
项目，并将其分配给名为
selected\u li
的变量

现在，您可以随心所欲地操作和使用所选的

编辑：使用jQuery，这项工作可能会简单一点。
代码在哪里？我看不到……你想要不想要jQuery解决方案？
ul li
？为什么不行？@mohkhan应该更新now@Brilliand是的jQuerySo我的主要目标是建立一个网站，当用户点击一个尺寸（比如说8）时，它会自动选择特定的li指向ul中的8。是否有方法使用。单击（）有了这个？看看我在上面留下的评论点击一个什么？是的，点击可以用于这个，但是代码是什么样的取决于点击的是什么。所以这真的是关于一个jQuery UI下拉列表？那么你根本不应该做这个问题所要求的。使用jQuery UI方法告诉下拉列表它应该设置为什么值。他说re是我想做的一个更详细的例子，
的结束标记是可选的。因此，感谢您提供的信息。我曾经做过xhtml，在其中，在html5之后，您总是必须关闭，并且一直在免费完成。幸运的是，我的IDE自动完成html标记，所以没有浪费太多时间。缺点是，用户损失了很多下载我的可选结束标签时带宽不足。很抱歉，我无法首先回答你的问题。希望你得到这项工作。
$(document).ready(function(){
    $('select').on('change',function(){
        alert($('.selectBox-options li').eq($(this).val()-1).text());
    });
});

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

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