如何從ul li獲取單獨的值

Question

我想從ul中獲取價值。 我可以獲取值，但問題是我的函數獲取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

這段Java代碼將遍歷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指向該元素。

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

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

Answer 4

通過查看您的HTML標記，似乎您需要單擊的li的文本。

您可以只為每個li添加click事件監聽器。

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>