Reputation: 2255
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
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
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
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
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
Reputation: 6330
use $(this)
$("#images > img").each(function(){
$(this).css({
margin-top:15px;
margin-bottom:15px;
});
});
Upvotes: 4
Reputation: 231
$("#images > img").each(function(){
$(this).css({
margin-top:15px;
margin-bottom:15px;
});
});
?
Upvotes: 1