3

So I want to add a class to all the images within particular <div> using javascript.
I have made this code that adds a class to all the images in the webpage:

$(function(){
    $('img').addClass('posts');
});

But i want to add it only for a particular <div>.
And I need a different version that excludes the images from adding class within a <div>
How is it possible?

8 Answers 8

9

please, use find, it's better based on best practices of performance using jquery.

$('#your_div').find('img').addClass('your-class')

3
  • 1
    Good answer, this should be used. Mar 10, 2016 at 22:25
  • How do I use 'find' to apply a class to all the images in the webpage?
    – Zack
    Mar 11, 2016 at 7:53
  • If you need in ALL images, you don't need the find, but in case of images inside a particular div, find works because jQuery creates an array of all elements this way and you can apply anything that jQuery allows you to Mar 11, 2016 at 12:54
3

In pure javascript as asked:

window.onload = function() {
  var imgs = document.querySelectorAll('div.div1 img');
  [].forEach.call(imgs, function(element, index, array) {
    
    // add a new class
    element.classList.add("myclass");
    
    // ..or remove old class
    element.classList.remove("oldClass");
  });
}
<div class="div1">
    <img src="" alt="Smiley face" height="42" width="42" class="oldClass">
    <img src="" alt="Smiley face" height="42" width="42" class="oldClass">
    <img src="" alt="Smiley face" height="42" width="42" class="oldClass">
</div>
<div class="div2">
    <img src="" alt="Smiley face" height="42" width="42">
    <img src="" alt="Smiley face" height="42" width="42">
    <img src="" alt="Smiley face" height="42" width="42">
</div>
<div class="div3">
    <img src="" alt="Smiley face" height="42" width="42">
    <img src="" alt="Smiley face" height="42" width="42">
    <img src="" alt="Smiley face" height="42" width="42">
</div>

1

It seems like you've got more than enough responses to the first part of your question. As for the second, you can you use the :not pseudo-selector:

$(':not(#myDiv) > img').addClass('otherClass');
0
0

You can add more selectors in your function, like this:

$(function(){
    $('.particular-div img').addClass('posts');
});

All the images inside .particular-div will add the class 'posts' to it.

1
  • how do I exclude a Div from adding a class using this?
    – Zack
    Mar 11, 2016 at 8:10
0

give the div an id and do this

$(function(){
    $('#myDiv img').addClass('posts');
});
3
  • how do I exclude a Div from adding a class using this?
    – Zack
    Mar 11, 2016 at 8:10
  • this will only add class to all your image inside the div it will not add class for the div or any other elements
    – elreeda
    Mar 11, 2016 at 10:18
  • no, i want to add a class to all the images in the webpage except the ones inside a particular div.
    – Zack
    Mar 11, 2016 at 11:12
0

You would have to have a way to specifically reference the div that you want to target and then target all of the images within that div.

For example, if you div had a particular ID, you can do something like this:

$('#divID img').addClass('posts');
0

Add that particular div an ID:

HTML CODE

<div id="myDiv" />

JS CODE

$(function(){
    $('#myDiv img').addClass('posts');
});
1
  • how do I exclude a Div from adding a class using this?
    – Zack
    Mar 11, 2016 at 8:10
-1

Using the .find() should be used for filtering.

You can refer to this page to see the performance differences:http://jsperf.com/jquery-child-selector-vs-find/3

See fiddle: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/11/

HTML Example

<div id="someDiv">
  <img src="http://lorempixel.com/400/200/" style="display: none">
  <img src="http://lorempixel.com/400/200/" style="display: none">
  <img src="http://lorempixel.com/400/200/" style="display: none">
</div>

Jquery

$('#someDiv').find('img').addClass('showIMG')

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.