get multiple element li with javascript

Question

What I need to get all value of multiple li from the HTML code.

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

This how i get with javascript:

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

and i get the answer:

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

1. Where is block-system-main? 2. Why same class used twice in getElementsByClassName('item-highlights item-highlights') 3. To get the innerHTML, iterate over the HTMLCollection and get the innerHTML of individual element. — Tushar
– Tushar, Commented Mar 3, 2016 at 3:49
1. i'm sorry i forget to put it, block-system-main is id on <section> 2. I thought i can access 2 class. can you help me to correct the code? — Steven Andrian
– Steven Andrian, Commented Mar 3, 2016 at 3:57

Sean_A91 · Accepted Answer · 2016-03-03 03:59:37Z

1

Heres an easy to understand answer.

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

If you know css then its simple to change the call to "querySelectorAll" as it is only comparing things through the same way css does, So you can change it however you like.

answered Mar 3, 2016 at 3:59

Sean_A91

3534 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steven Andrian Over a year ago

The output answer is 6, i dont want to count the li tag.

Sean_A91 Over a year ago

What do you mean? Thats not what this is doing. The "Values" variable will contain an array of strings, each one being the list items' values

Nikolay Ermakov · Accepted Answer · 2016-03-03 04:03:53Z

1

Expanding on @Tushar comment:

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

Check demo - Fiddle.

edited Mar 3, 2016 at 4:03

answered Mar 3, 2016 at 3:53

Nikolay Ermakov

5,0712 gold badges14 silver badges19 bronze badges

5 Comments

Tushar Over a year ago

Better selector: document.querySelectorAll('#block-system-main .item-highlights')

Steven Andrian Over a year ago

but the output answer is <li>4G LTE</li><li>Dual Sim</li><li>RAM 1GB</li><li>ROM 8GB</li><li>screen 5.5</li><li>Warranty 1 year</li>

Tushar Over a year ago

Use textContent to get only the innerText???. CC @StevenAndrian

Nikolay Ermakov Over a year ago

Just use innerText instead of innerHTML

Steven Andrian Over a year ago

@Tushar yes, i want to get value, for example 4G LTE, Dual Sim, RAM 1GB, ROM 8GB, Screen 5.5, Warranty 1 Year. i want to put comma (,) between every value.

balanceiskey · Accepted Answer · 2016-03-03 04:00:04Z

0

You should be able to select every li using querySelectorAll and then map those values. It would look like this:

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


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

Example: http://jsbin.com/zumewidoyo/edit?html,js,console

answered Mar 3, 2016 at 4:00

balanceiskey

438 bronze badges

Comments

Larry Lane · Accepted Answer · 2016-03-03 04:03:46Z

If you want to select every li element you can do something like this:

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

Thinh Nguyen · Accepted Answer · 2016-03-03 04:21:50Z

The function getElementsByClassName return an array. Just iterate over it instead of using the "[0]" to get only the first element.

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>

Collectives™ on Stack Overflow

get multiple element li with javascript

5 Answers 5

2 Comments

5 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

5 Comments

Comments

Comments

Comments

Related