3

How can I loop through an object returned from "getElementsByTagName()" on a selector correctly. I can't seem to get it right.

For example, if I have a bunch of divs like this:

<div class="wrapper"> <div class="test1">this is a div</div> <div class="test2">this is a div</div> <div class="test1">this is a div</div> <div class="test2">this is a div</div> <div class="test1">this is a div</div> <div class="test2">this is a div</div> </div>

and I want to loop through the results from a "getElementsByTagName()" like this:

var wrapper = document.querySelector(".wrapper"); var divs = wrapper.getElementsByTagName("div"); for (i = 0; i < divs.length; ++i) { each = divs[i]; if (each.classList.contains("test2")) { this.style.display = "none"; } }

and here's a fiddle : http://jsfiddle.net/Y2Yzv/1/

Improve this question
0

6 Answers 6

Reset to default
6

You have an error in the console: Uncaught TypeError: Cannot set property 'display' of undefined

Try:

var wrapper = document.querySelector(".wrapper"); var divs = wrapper.getElementsByTagName("div"); for (i = 0; i < divs.length; ++i) { each = divs[i]; if (each.classList.contains("test2")) { each.style.display = "none"; } }

Demo

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

1 Comment

If you put a console.log(this); you'll see that this is the Window object, which has no style property.
4

each.style.display = "none"; would work instead of this

this refers to the global object, and not to the element being iterated in your loop.

Here is corrected fiddle:

http://jsfiddle.net/Y2Yzv/4/

Improve this answer

Comments

3

Less code solution:

var divs = document.querySelectorAll('.wrapper div'); [].forEach.call(divs, function (div) { if (div.classList.contains('test2')) div.style.display = 'none'; });
Improve this answer

Comments

1

Change this.style.display = "none"; to each.style.display = "none"

Improve this answer

3 Comments

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post.
@aj8uppal How does this not answer the question?
I agree it's a bit sparse but that's not a reason to delete it.
1

Check this solution: http://jsfiddle.net/ZffWg/

These are the main changed I've made

for (i in divs) { if (divs[i].className.indexOf("test2") > -1) { divs[i].style.display = "none"; } }

I removed the i=0 and so the loop runs on the array index itself.

I also used className instead of classList for better cross-platform compatibility

Improve this answer

Comments

-1 

let divs_in_wrapper = document.querySelectorAll('.wrapper div'); divs_in_wrapper.forEach((item, index, arr) => { if (item.classList.contains("test2")) { item.style.display = "none"; } });
<div class="wrapper"> <div class="test1">this is a div</div> <div class="test2">this is a div class test2</div> <div class="test1">this is a div</div> <div class="test2">this is a div class test2</div> <div class="test1">this is a div</div> <div class="test2">this is a div class test2</div> </div> <div class="test2">this is outside a div</div>

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.