用javascript获取多个元素li

时间:2016-03-03 03:47:03

标签: javascript

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

5 个答案:

答案 0 :(得分:1)

扩展@Tushar评论:

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

检查演示 - Fiddle

答案 1 :(得分:0)

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

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相同的方式比较事物,所以您可以随意更改它。

答案 2 :(得分:0)

您应该可以使用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

答案 3 :(得分:0)

如果您想选择每个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"));

答案 4 :(得分:0)

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