CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zack
Zack

Reputation: 501

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

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?

Upvotes: 3

Views: 6361

Answers (8)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

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

Upvotes: -1

gaetanoM
gaetanoM

Reputation: 42054

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>

Upvotes: 3

Parker
Parker

Reputation: 23

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

Upvotes: 1

Mihai Farcas
Mihai Farcas

Reputation: 119

Add that particular div an ID:

HTML CODE

<div id="myDiv" />

JS CODE

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

Upvotes: 0

Matheus Marsiglio
Matheus Marsiglio

Reputation: 348

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

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

Upvotes: 9

Nick Zuber
Nick Zuber

Reputation: 5637

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

Upvotes: 0

elreeda
elreeda

Reputation: 4597

give the div an id and do this

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

Upvotes: 0

Roy
Roy

Reputation: 8069

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.

Upvotes: 0

Related Questions