1

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

4

6 回答 6

3

你可以使用querySelectorAll：

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

如果您不确定该课程ul是否有selectBox-options课程，请删除该.selectBox-options部分 - 但请记住，它会让您li在页面上找到所有内容。

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

var li =  $("ul.selectBox-options li");
于 2013-07-31T23:45:09.670 回答
0

如果 theselect和 theul是同一个父元素内的兄弟（div例如 a），则可以使用querySelectorandquerySelectorAll选择正确的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）。然后我们将一个匿名函数（也可以命名）映射到selectschange事件（每次选择一个选项时都会触发该事件）。li然后，此函数从我们在第二行获取的项目集合中选择适当的项目，并将其分配给名为 的变量selected_li。

现在您可以随心所欲地操作和使用selected_li。

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

于 2013-08-01T05:50:41.853 回答
0

在 CSS 中：

li { color:black; }

与 ul：

ul li { }

或与类：

ul li.ommitted { }

或使用 ul&li 类

ul.selectBox-options li.ommitted { }

附言。不要忘记结束标签

</li>
于 2013-07-31T23:55:47.797 回答
0

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

$(document).ready(function(){
    $('select').on('change',function(){
        alert($('.selectBox-options li').eq($(this).val()-1).text());
    });
});
于 2013-08-01T04:30:13.350 回答
0 
<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>
于 2013-08-01T01:11:06.430 回答
0

如果你接受 jQuery，就像你提到的：

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

正如 jQuerydocumentation声明的那样。

我不确定如何使用原始 javascript 来做到这一点:)

于 2013-07-31T23:44:26.777 回答