用javascript獲取多個元素li

Question

我需要從HTML代碼中獲取多個li的所有值。

<div class="row"> 
<div style="margin-left:11px"> 
    <strong>Detail Product</strong> 
</div> 
    <div class="col-sm-12"> 
     <ul class="item-highlights"> 
      <li>4G LTE</li> 
      <li>Dual Sim</li> 
      <li>RAM 1GB</li> 
     </ul> 
    </div> 
    <div class="col-sm-12"> 
     <ul class="item-highlights"> 
      <li>ROM 8GB</li> 
      <li>Screen 5.5</li> 
      <li>Warranty 1 Year</li> 
     </ul> 
    </div> 

該如何到使用javascript：

var test = document.getElementById('block-system-main').getElementsByClassName('item-highlights item-highlights')[0].innerHTML; 

和我得到的答案是：

<li>4G LTE</li><li>Dual Sim</li><li>RAM 1GB</li> 

Answer 1

擴展在@Tushar評論：

var test = ''; 
[].forEach.call(document.querySelectorAll('#block-system-main .item-highlights'), function(item) { return test += item.innerText; }) 

查看演示 - Fiddle。

Answer 2

繼承人一個容易理解的答案。

var items = document.querySelectorAll(".item-highlights li"); 
var values = []; 
for(var n = 0; n < items.length; n++) 
    values.push(items[n].innerHTML); 

如果你知道CSS那麼它的簡單改變呼叫「querySelectorAll」，因爲它只能通過同樣的方式做的CSS比較的東西，所以，你可以改變它，只要你喜歡。

Answer 3

您應該可以選擇每個li使用querySelectorAll然後map這些值。它應該是這樣的：

var listItems = Array.prototype.slice.call(document.querySelectorAll('li')); 


var vals = listItems.map(function (item) { 
    return item.innerHTML; 
}); 

例子： http://jsbin.com/zumewidoyo/edit?html,js,console

Answer 4

如果你想選擇的每個li元素，你可以做這樣的事情：

Live Preview

HTML

<div class="row"> 
<div style="margin-left:11px"> 
    <strong>Detail Product</strong> 
</div> 
    <div class="col-sm-12"> 
     <ul class="item-highlights"> 
      <li>4G LTE</li> 
      <li>Dual Sim</li> 
      <li>RAM 1GB</li> 
     </ul> 
    </div> 
    <div class="col-sm-12"> 
     <ul class="item-highlights"> 
      <li>ROM 8GB</li> 
      <li>Screen 5.5</li> 
      <li>Warranty 1 Year</li> 
     </ul> 
    </div> 

的JavaScript

//store the list elements 
var lists = document.getElementsByTagName('li'); 

//array to hold the li elements 
var liElements = []; 

//loop through the lists 
for (var i = 0; i < lists.length; i++) { 

    //add the li element values to the array 
    liElements.push(lists[i].innerHTML); 

} 

//show the results 
alert(liElements.join("\n")); 

Answer 5

該函數返回getElementsByClassName方法的陣列。只需遍歷它而不是使用「[0]」來獲取第一個元素。

function getValue() { 
 
    var test = document.getElementById('block-system-main').getElementsByClassName('item-highlights'); 
 
    var array = []; 
 
    for (var i = 0; i < test.length; i++) { 
 
    var liList = test[i].getElementsByTagName('li'); 
 
    for (var j = 0; j < liList.length; j++) 
 
     array.push(liList[j].innerHTML); 
 
    } 
 
    return array; 
 
} 
 
alert(getValue());

<div id="block-system-main"> 
 
    <div class="row"> 
 
    <div style="margin-left:11px"> 
 
     <strong>Detail Product</strong> 
 
    </div> 
 
    <div class="col-sm-12"> 
 
     <ul class="item-highlights"> 
 
     <li>4G LTE</li> 
 
     <li>Dual Sim</li> 
 
     <li>RAM 1GB</li> 
 
     </ul> 
 
    </div> 
 
    <div class="col-sm-12"> 
 
     <ul class="item-highlights"> 
 
     <li>ROM 8GB</li> 
 
     <li>Screen 5.5</li> 
 
     <li>Warranty 1 Year</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>