使用 JavaScript 获取多元素 Li

get multiple element li with javascript

本文关键字：元素 Li 获取 JavaScript 使用      更新时间：2023-09-26

我需要从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>

这是一个易于理解的答案。

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相同的方式比较事物，因此您可以随心所欲地更改它。

扩展@Tushar注释：

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

检查演示 - 小提琴。

您应该

能够使用 querySelectorAll 选择每个li，然后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

如果你想选择每个li元素，你可以做这样的事情：

实时预览

.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"));

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

相关文章：