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?

Zack
  • 471
  • 3
  • 9
  • 22

8 Answers8

9

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

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

Matheus Marsiglio
  • 350
  • 1
  • 5
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>
gaetanoM
  • 41,594
  • 6
  • 42
  • 61
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');
Parker
  • 23
  • 7
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.

Roy
  • 7,811
  • 4
  • 24
  • 47
0

give the div an id and do this

$(function(){
    $('#myDiv img').addClass('posts');
});
elreeda
  • 4,525
  • 2
  • 18
  • 45
  • how do I exclude a Div from adding a class using this? – Zack Mar 11 '16 at 08: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 '16 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 '16 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');
Nick Zuber
  • 5,467
  • 3
  • 24
  • 48
0

Add that particular div an ID:

HTML CODE

<div id="myDiv" />

JS CODE

$(function(){
    $('#myDiv img').addClass('posts');
});
CMedina
  • 4,034
  • 3
  • 24
  • 39
Mihai Farcas
  • 119
  • 1
  • 7
-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')
Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39