Question

我想从ul li中获取值。我能够获取值，但问题是我的函数获取ul中所有列表项的值。这是我的代码

<div class = "col-sm-8 col-md-8" align = "center">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
                </button>
                <ul id = "filter" class="dropdown-menu" role="menu">
                  <li><a href="#contains">value one</a></li>
                  <li><a href="#its_equal">value two</a></li>
                  <li><a href="#greather_than">value three</a></li>
                  <li><a href="#less_than">value four</a></li>
                  <li class="divider"></li>
                  <li><a href="#all">value five</a></li>
                </ul>
</div>
</div>
</div>

这是JS代码

var li = document.getElementById("filter");
var choice = (li.textContent || li.innerText);

Answer 1

您可以使用此代码

获取ul的元素

var li = document.getElementById("filter");
var a_elements = li.getElementsByTagName("li");
for (var i = 0, len = a_elements.length; i < len; i++ ) {
   alert(a_elements[ i ].innerText);
}

Answer 2

这段Javascript将循环通过li元素并为您检索值

var list = document.getElementById("filter");

var items = list.getElementsByTagName("li");
for (var i = 0; i < items.length; ++i) {
  // do something with items[i], which is a <li> element
  console.log(items[i].textContent || items[i].innerText);
}

Answer 3

您可以使用jQuery .each

.each（）方法旨在使DOM循环结构简洁且不易出错。调用时，它会迭代属于jQuery对象的DOM元素。每次回调运行时，都会从0开始传递当前循环迭代。更重要的是，回调是在当前DOM元素的上下文中触发的，因此关键字this指的是元素.... {{3} }

＆＃13;

$(document).ready(function(){

  $( "ul#filter li" ).each(function( index ) {
    console.log( index + ": " + $( this ).text() );
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "col-sm-8 col-md-8" align = "center">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
                </button>
                <ul id = "filter" class="dropdown-menu" role="menu">
                  <li><a href="#contains">value one</a></li>
                  <li><a href="#its_equal">value two</a></li>
                  <li><a href="#greather_than">value three</a></li>
                  <li><a href="#less_than">value four</a></li>
                  <li class="divider"></li>
                  <li><a href="#all">value five</a></li>
                </ul>
</div>
</div>
</div>

＆＃13;

Answer 4

通过查看您的HTML标记，您似乎需要点击的li文字。

您只需为每个li添加点击事件监听器。

var ul = document.getElementById("filter");
var lis = ul.getElementsByTagName("li");

for(var i=0; i<lis.length; i++) {
  lis[i].addEventListener("click", function(e) {
    alert(this.textContent || this.innerText);
  });
}

希望这有帮助。

Answer 5

使用document.querySelectorAll，返回文档中与指定的选择器组匹配的元素列表。返回的对象是NodeList。

Array.from()方法从类似数组或可迭代的对象创建一个新的Array实例。

var liElems = document.querySelectorAll('ul#filter li');
var liElemsLikeArr = Array.from(liElems);
liElemsLikeArr.forEach(function(elem) {
  alert(elem.textContent);
});

<ul id="filter" class="dropdown-menu" role="menu">
  <li><a href="#contains">value one</a>
  </li>
  <li><a href="#its_equal">value two</a>
  </li>
  <li><a href="#greather_than">value three</a>
  </li>
  <li><a href="#less_than">value four</a>
  </li>
  <li class="divider"></li>
  <li><a href="#all">value five</a>
  </li>
</ul>

如何从ul li获取单独的值

5 个答案: