0

I have list:

<ul class='mates'>
   <li class='m' id='1'>Jakub</li>
   <li class='f' id='2'>Vinnie</li>
   <li class='m' id='3'>David</li>
</ul>

How can I select 'li' tags "ONE BY ONE" to be checked if their content (between 'li' tags) is equal to 'xyz'.

element = document.getElementsByClassName('.mates').firstChield.innerHTML;
do {
    if(){
        //do something
    }
}while (element = element.nextSibling);

but I'm not getting even far enough to select firstChild. This error is showing in console: "Cannot read property 'innerHTML' of undefined". This needs to be done in plain JavaScript. Any ideas?

2
  • Why can't you use jQuery?
    – Geeky Guy
    May 23, 2013 at 14:29
  • Assessment. It have to be plain JavaScript.
    – Jakub Zak
    May 23, 2013 at 14:29

4 Answers 4

3
<ul class='mates'>
   <li class='m' id='1'>Jakub</li>
   <li class='f' id='2'>Vinnie</li>
   <li class='m' id='3'>David</li>
</ul>
<script>
var mates = document.getElementsByClassName('mates')[0];
for (var i=0; i< mates.childNodes.length; i++){
    if(mates.children[i].innerHTML == 'Vinnie') alert("Got you! ID "+mates.children[i].id)
}
</script>
2
  • how would you remove this element from DOM?
    – Jakub Zak
    May 23, 2013 at 15:56
  • Sorry for the late reply. instead of alert() line make it mates.children[i].parentNode.removeChild(mates.children[i]);
    – 0xAli
    May 23, 2013 at 22:49
2

Drop the dot in the parameter. Like this:

element = document.getElementsByClassName('mates').firstChild.innerHTML;

The dot is not a part of the name of the class.

EDIT also notice that the question originally had a typo in firstChild.

2

Your element variable is not an element (its value is probably undefined). It should work if you use it like this:

var element = document.getElementsByClassName('mates')[0].firstChild;
do {
    if(element.innerHTML == 'foo'){
        //do something
    }
} while (element = element.nextSibling);

The code above fixes:

  • The class name as pointed out by @Renan
  • The typo in .firstChild

Also note that getElementsByClassName returns a list of elements, so you have to grab the first one in the list (index 0) to reach your <ul>.

Finally, keep in mind that you'll be looping over all children of the <ul>, including empty text nodes (see a demonstration at http://jsfiddle.net/58ZZF/). This can be avoided if you use firstElementChild and nextElementSibling, but I'm not sure if there are cross browsers issues with those properties (MDN only says it's Firefox 3.5+).

1
  • I like this answer better than mine.
    – Geeky Guy
    May 23, 2013 at 14:33
1

Few mistakes

  1. Class name to getElementsByClassName should not have .
  2. Spelling mistake in firstChild
  3. getElementsByClassName returns an array, not a dom reference
  4. When using nextSibling it could return text nodes also, you need to check the nodeType to make sure the element is a element node(nodeTye = 1), also you can check the tagName == 'LI'

Try

var element = document.getElementsByClassName('mates')[0].firstChild;
do {
    if(element.nodeType == 1){
        console.log(element.textContent)
    }
}while (element = element.nextSibling);

Demo: Fiddle

1
  • 5-'.mates' should be 'mates' like you did
    – 0xAli
    May 23, 2013 at 14:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.