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

I want to know how to access each li within the ul? I am not sure exactly what the name of the ul is.

我想知道如何访问ul中的每个li?我不确定ul的名字到底是什么。

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

我的主要目标是让用户点击下拉列表中的大小,比如大小为8,它会自动检测ul内的特定li(8)

6 个解决方案

#1

You could use querySelectorAll:

您可以使用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.

如果您不确定ul将具有selectBox-options类,那么删除.selectBox-options部分 - 但请记住,它会在页面上为您提供每个li。

If you're using jQuery, then this is a bit more compatible, and does basically the same thing:

如果你正在使用jQuery,那么它会更兼容,并且基本上做同样的事情:

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

#2

If you accept jQuery, like you mentioned:

如果您接受jQuery,就像您提到的那样:

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

As the jQuery documentation declares.

正如jQuery文档所声明的那样。

I'm not sure how to do it with raw javascript though :)

我不知道怎么用原始的javascript做:)

#3

in CSS:

li { color:black; }

with ul:

ul li { }

or with class:

或与班级:

ul li.ommitted { }

or with ul&li class

或者使用ul&li类

ul.selectBox-options li.ommitted { }

ps. Don't forget the end tag

PS。不要忘记结束标记

</li>

#4

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

#5

You want like this? DEMO http://jsfiddle.net/yeyene/ZjHay/

你想要这样吗?演示http://jsfiddle.net/yeyene/ZjHay/

$(document).ready(function(){
    $('select').on('change',function(){
        alert($('.selectBox-options li').eq($(this).val()-1).text());
    });
});

#6

If the select and the ul are siblings inside the same parent element (a div for instance), you can use querySelector and querySelectorAll to select the proper ul element and its children.

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

(Above code is probably not cross-browser compatible out of the box, remember to use working code.)

(上面的代码可能不是开箱即用的跨浏览器兼容,记得使用工作代码。)

In the above code, we first get the select element and the ul's child elements (lis). Then we map an anonymous function (could be named too) to the selects change event (which is triggered each time an option is chosen with it). This function then selects the proper li item from the item collection we fetched in line two and assign it to a variable called selected_li.

在上面的代码中,我们首先得到select元素和ul的子元素(lis)。然后我们将一个匿名函数(也可以命名)映射到选择更改事件(每次选择一个选项时都会触发它)。然后,此函数从我们在第二行中获取的项集合中选择正确的li项,并将其分配给名为selected_li的变量。

Now you can manipulate and use the selected_li however you want.

现在,您可以根据需要操作和使用selected_li。

EDIT: with jQuery this job is probably a bit easier.

编辑:使用jQuery这项工作可能会更容易一些。

#1