Get value of List Item inside of list Item Javascript

Question

I am trying out javascript for the first time and would like to know how to get elements from inside elements so that I could display them to the user. I was wondering if there is any javascript code that could go and fetch the following items:

<ul id="tests">
<li class="test w0">
    <div class="letter l0">a</div>
    <div class="letter l1">b</div>
    <div class="letter l2">c</div>
</li>
<li class="test w1">
    <div class="letter l0">a2</div>
    <div class="letter l1">b2</div>
    <div class="letter l2">c2</div>
</li>
<li class="test w3">
    <div class="letter l0">a3</div>
    <div class="letter l1">b3</div>
    <div class="letter l2">c3</div>
</li>
</ul>

I would like to get the letters inside of each list item that is inside of the "test" element. How would I do so using solely javascript?

All I want is to put the strings into an array to display to the user. I know how to display the info to the user, just not how to get the strings inside of the elements.

OUTPUT CODE:

 [a,b,c,a2,b2,c2,a3,b3,c3] //Store strings in array

I don't understand JQuery, so please I would just like a javascript method....

j08691 · Accepted Answer · 2014-03-14 01:14:15Z

3

You can use querySelectorAll:

var ary = [];
var lis = document.querySelectorAll('li.test div.letter');
for (var i = 0; i < lis.length; i++) {
    ary[i] = lis[i].innerHTML;
}
console.log(ary); // outputs ["a", "b", "c", "a2", "b2", "c2", "a3", "b3", "c3"]

jsFiddle example

answered Mar 14, 2014 at 1:14

j08691

209k33 gold badges269 silver badges281 bronze badges

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

4 Comments

RobG Over a year ago

The OP could also use var lis = document.getElementById('tests').getElementsByTagName('*'); to generate the list. The textContent / innerText property might be more suitable than innerHTML.

Jeremy J Starcher Over a year ago

Yea.. textContent or innerText over innerHTML. Talk about subtle bugs that will take you a while to track down ;)

Joshua Over a year ago

Greg, this is a very good vanilla javascript solution. Simple and lets the browser figure out the best way to find all the elements.

j08691 Over a year ago

As far as I'm aware, innerText is not part of any standard, valid only on block level elements, and is a Microsoft concoction.

Alain Jacomet Forte · Accepted Answer · 2014-03-14 01:16:59Z

0

You can try this:

Using jQuery:

var values = [];
$('#tests').find('.letter').each(function(i, element) {
    values.push($(this).text());
});

Using just JavaScript:

var values = [], inputs = document.getElementsByClassName('letter');
inputs.forEach(function(element) { 
    values.push(element.innerHTML);
});

answered Mar 14, 2014 at 1:16

Alain Jacomet Forte

4,6956 gold badges33 silver badges43 bronze badges

Comments

Joshua · Accepted Answer · 2014-03-14 01:21:43Z

0

If you are using jQuery you can use the map function. It is in the context of the unordered list. Here is the code:

var $ul = $('#tests'),
stringArray;

stringArray = $.map($ul.find('div'), function(el, index){
    return el.innerHTML;
});

console.log(stringArray);
$ul.after(stringArray);

JsFiddle: http://jsfiddle.net/8xkK8/

answered Mar 14, 2014 at 1:21

Joshua

5431 gold badge5 silver badges15 bronze badges

Comments

Jeremy J Starcher · Accepted Answer · 2014-03-14 01:28:12Z

0

Pure Javascript solution that walks the DOM and gets just the text nodes:

  // Get just the text out of an element.  Strips formatting.
  getText = function (el) {
    var ret;
    var txt = [],
      i = 0;

    if (!el) {
      ret = "";
    } else if (el.nodeType === 3) {
      // No problem if it's a text node
      ret = el.nodeValue;
    } else {
      // If there is more to it, then let's gather it all.
      while (el.childNodes[i]) {
        txt[txt.length] = getText(el.childNodes[i]);
        i++;
      }
      // return the array as a string
      ret = txt.join("");
    }
    return ret;
  };

answered Mar 14, 2014 at 1:28

Jeremy J Starcher

24k6 gold badges56 silver badges75 bronze badges

Collectives™ on Stack Overflow

Get value of List Item inside of list Item Javascript

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related