giving attributes to all imgs in a div

Question

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


});

just realized also, the properties should be listed marginTop:15, marginBottom:15 — loriensleafs, Nov 26 '12 at 12:27

score 4 · Answer 1 · edited May 23 '17 at 11:56

4

use $(this)

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

edited May 23 '17 at 11:56

Community

1
1

answered Nov 26 '12 at 12:11

Buzz

6,030
4
33
47

score 2 · Accepted Answer · edited Nov 26 '12 at 12:58

2

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;
}

edited Nov 26 '12 at 12:58

Rubens Mariuzzo

28,358
27
121
148

answered Nov 26 '12 at 12:14

Billy Moat

20,792
7
45
37

can I ask why writing a class is better just out of curiosity? – loriensleafs Nov 26 '12 at 12:18
also the images are being added dynamically and doing it through pure css doesn't seem to get applied for some reason, I'm not sure why? – loriensleafs Nov 26 '12 at 12:20
Much easier to maintain a stylesheet rather than css directly inside your jQuery. I seem to remember reading that it's better for performance/speed too. – Billy Moat Nov 26 '12 at 12:21
Can you recreate the problem on jsfiddle.net or provide a link to your site? – Billy Moat Nov 26 '12 at 12:23
any idea on why doing it with pure css doesn't work with dynamically added content? Would it have to be bound after being added with javascript? – loriensleafs Nov 26 '12 at 12:24
@loriensleafs - I don't think so. As I said, if you can recreate the problem on jsfiddle.net or provide a link to your site that would let us see your problem. – Billy Moat Nov 26 '12 at 12:29
yes! Sorry I for some reason just didn't see that, I added the js to the top and the url is www.klossal.com . If you click on the bottom left image you can see how the script works. I added your function into the script so it's applying the css that way, it doesn't seem to work just in the style sheet. – loriensleafs Nov 26 '12 at 12:38
Which images should the css be applied to? The 7 thumnail images at the bottom of the page or the ones that appear when you click the thumbnail? – Billy Moat Nov 26 '12 at 12:42
the ones that appear when you click the thumbnail – loriensleafs Nov 26 '12 at 12:43
If you use Firebug you'll be able to see that the css is being applied to those images. ".images { margin:15px 0; }" – Billy Moat Nov 26 '12 at 12:45
yea so for those it is because I added into the function that animates to $("#images img").addClass("myClass"); if I take it out it doesn't add it. I took out that line of jquery, now it's not applying it anymore. You can see now that it doesn't work w/ just CSS. – loriensleafs Nov 26 '12 at 12:55
Okay, so just change your CSS to apply to the images now that they don't have that class applied: #images img { margin:15px 0; } – Billy Moat Nov 26 '12 at 12:57
....I'm not sure why that was so hard for me to wrap my head around, haha thanks for sticking with me on that.... – loriensleafs Nov 26 '12 at 13:00

score 1 · Answer 3 · answered Nov 26 '12 at 12:11

1

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

?

answered Nov 26 '12 at 12:11

Taff

231
1
13

score 1 · Answer 4 · answered Nov 26 '12 at 12:11

1

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.

answered Nov 26 '12 at 12:11

davidethell

11,708
6
43
63

thanks, it's always great when people give explanations like that. I didn't realize the > had that implication. – loriensleafs Nov 26 '12 at 12:26

score 1 · Answer 5 · answered Nov 26 '12 at 12:14

1

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 >

answered Nov 26 '12 at 12:14

Andy

14,427
3
52
76

so the images are being added dynamically and doing it through css that way doesn't seem to get applied. – loriensleafs Nov 26 '12 at 12:17

score 0 · Answer 6 · answered Nov 26 '12 at 12:11

0

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.

answered Nov 26 '12 at 12:11

RemarkLima

11,639
7
37
56

giving attributes to all imgs in a div

6 Answers6