Search code examples
javascripttagsgetelementsbytagnamegetelementsbyclassname

Select all tags within divs with certain class

I've been trying to find a solution to my problem for days now without any luck, I found this: getElementsByClassName doesn't work but it's not a solution to my problem since I want to access all tags and change them, so here we go:

I want to be able to change the style of tags that are within divs with a certain class. I started out by trying this with an ID on a div and that works exactly the way I want it, but since the page where I will use this will have the same div's appear several times I have to use class instead and I can't get it to work. I have to use javascript and not jQuery.

Example of how it worked with ID:

var images = document.getElementById("test").getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
  images[i].align = "right";
}
<div id="test">
  <img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet. Vivamus convallis, dolor a euismod scelerisque, nisi lorem placerat nisi, sed euismod ligula eros in lorem. Pellentesque vel ante semper,
    convallis ante in, mollis odio.
  </p>
  <img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet. Vivamus convallis, dolor a euismod scelerisque, nisi lorem placerat nisi, sed euismod ligula eros in lorem. Pellentesque vel ante semper,
    convallis ante in, mollis odio.
  </p>
</div>

Example of how I want it to work:

var images = document.getElementsByClassName("test").getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
  images[i].align = "right";
}
<div class="test">
  <img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
  </p>
  <img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
  </p>
</div>

<div class="test">
  <img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
  </p>
  <img src="http://galerie32.de/images-designer/thumbs/dummy-user.jpg" width="100">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis turpis justo, eu egestas elit aliquet sit amet.
  </p>
</div>

I understand that there should be a completely different way of writing the statement when I want to access the classes, but I can't figure out how.

Anyone who knows and can give me some pointers?

Solution

  • The code document.getElementsByClassName("test") gives you a list of elements, not one element. Do a loop (for) on these elements. In this loop, call getElementsByTagName("img").