Adding a class to all the images within a <div> using javascript & vice versa

Question

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?

Answer 1

请使用find ，它最好基于使用jquery的性能最佳实践。

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

Answer 2

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> 

Answer 3

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');

Answer 4

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.

Answer 5

give the div an id and do this

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

Answer 6

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');

Answer 7

Add that particular div an ID:

HTML CODE

<div id="myDiv" />

JS CODE

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

Answer 8

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')