Question

我想知道如何访问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）

Answer 1

您可以使用querySelectorAll：

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

如果您不确定ul是否有selectBox-options课程，请删除.selectBox-options部分 - 但请记住，它会在li开始然后是页面。

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

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

Answer 2

如果您接受jQuery，就像您提到的那样：

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

jQuery documentation声明。

我不知道如何使用原始javascript来执行此操作：）

Answer 3

CSS中的

：

li { color:black; }

用ul：

ul li { }

或与班级：

ul li.ommitted { }

或与ul＆amp; li class

ul.selectBox-options li.ommitted { }

PS。不要忘记结束标记

</li>

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

Answer 5

你想要这样吗？ DEMO http://jsfiddle.net/yeyene/ZjHay/

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

Answer 6

如果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的子元素（li s）。然后我们将一个匿名函数（也可以命名）映射到select s change事件（每次选择一个选项时都会触发）。然后，此函数从我们在第二行中获取的项集合中选择正确的li项，并将其分配给名为selected_li的变量。

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

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

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

6 个答案: