CODEWITHSUNDEEP
jquerychildren
loriensleafs
loriensleafs

Reputation: 2255

giving attributes to all imgs in a div

I want all the images in a div to have a certain margin property, I can't quite seem to get it to work, this is what I've tried,

$("#images > img").each(function(){
    $(img).css({
      margin-top:15px;
      margin-bottom:15px;
});
});

thanks for any help

$("#pt_figures").click(function() {

$('#images').empty();

$('#images').css({
paddingLeft: 150,
paddingRight: 0
});
$('#controls').css({
width:700,
marginLeft:150
});
$('#info').css({
width:660,
marginLeft:150

});

var id = $(this).attr('id');

$("#info_header").load(id +"_header.txt"); $("#content_1").load(id +"_1.txt"); $("#content_2").load(id +"_2.txt"); $("#content_3").load(id +"_3.txt");

$("<img>", { src: "http://www.klossal.com/figures_doc.jpg" }).appendTo("#images"); 
$("<img>", { src: "http://www.klossal.com/figure_front.png" }).appendTo("#images"); 
$("<img>", { src: "http://www.klossal.com/figure_back.jpg" }).appendTo("#images");


$("#images img").addClass("images");

$("#top_section").animate({
    height: 3780
}, 300);
$("#grid").animate({
    marginTop: 3780 + 300,
    paddingBottom: 300
}, 300); 


});

Upvotes: 3

Views: 144

Answers (6)

Billy Moat
Billy Moat

Reputation: 21050

Recommended practice is surely to add a class which defines the properties you require rather than write CSS directly in your jQuery code.

Javascript:

$("#images img").addClass("myClass");

CSS:

.myClass {
   margin:15px 0;
}

Alternatively, just define your properties in your CSS and don't use jQuery.

CSS:

#images img {
   margin:15px 0;
}

Upvotes: 2

Andy
Andy

Reputation: 14575

This may aswell be done in pure css.

#images > img { // ">" means direct child, remove it if necesarry
  margin: 15px 0; // shorthand for top/bottom: 15px and right/left: 0px
}

> means direct child, which means only images that are children of #images will be affected, "grandchildren" and further will not be. If you intend them to be affected, remove the >

Upvotes: 1

davidethell
davidethell

Reputation: 12048

Try this:

$("#images img").each(function(){
    $(this).css({
        margin-top:15px;
        margin-bottom:15px;
    });
});

You are using $(img) but that has no context. Use $(this) instead. Also I removed the > from your selector in case the IMG tags are not a direct descendent of the DIV.

Upvotes: 1

RemarkLima
RemarkLima

Reputation: 12047

Change $(img) to $(this) and it should be good to go.

$(this) is the current object in the each loop.

You may be able to apply $("#images > img").css(...) as well, as I don't see directly why you need to loop through them all.

Upvotes: 0

Buzz
Buzz

Reputation: 6330

use $(this)

 $("#images > img").each(function(){
        $(this).css({
          margin-top:15px;
          margin-bottom:15px;
    });
    });

Upvotes: 4

Taff
Taff

Reputation: 231

$("#images > img").each(function(){
    $(this).css({
      margin-top:15px;
      margin-bottom:15px;
});
});

?

Upvotes: 1

Related Questions