Taking attributes and using the as styles with jquery .each()

Question

i guess this is a pretty simple question.

I want to give my li-tags a width that matches the image thats is inside it. So far i am getting my image-attributes right for each one.

$("#slider1 li img").each(function(){
 var imageWidth = $(this).width();
 var imageHeight = $(this).height();    
 $(this).attr('width', imageWidth);
 $(this).attr('height', imageHeight);
});

But i can't seem to figure out how i transfer the imageWidth to my li-tag. I tried with:

$("#slider1 li").css("width", imageWidth);

But that just renders the same width for all the li's.

Thanks for helping out :)

EDIT: My markup:

<ul id="slider1"> 
<li><img src="tester.jpg"/></li> 
<li><img src="tester2.jpg"/></li> 
<li><img src="tester3.jpg"/></li> 
<li><img src="tester4.jpg"/></li> 
<li><img src="tester.jpg"/></li> 
<li><img src="tester2.jpg"/></li>
</ul>

daybreaker · Accepted Answer · 2011-06-30 16:08:19Z

6

You can directly call just the parent li that contains the img element like this:

$(this).parent('li').css('width',imageWidth);

Note: this only works if the img is only one level deep under the li. Otherwise, use .closest('li') instead. parent will only traverse one level up, where as closest will keep traversing the DOM tree until it finds the element specified.

edited Jun 30, 2011 at 16:08

answered Jun 30, 2011 at 16:03

daybreaker

1,4401 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

daybreaker Over a year ago

You are correct. After reading the documentation, closest() has several benefits over parent() or parents()

Jonas Thomsen Over a year ago

This is also setting the same width for all the li's. Hmm it seem like it is taking all the li-parents :)

Nicola Peluchetti · Accepted Answer · 2011-06-30 16:03:13Z

2

You should do:

 $(this).closest('li').css("width", imageWidth);

like this

$("#slider1 li img").each(function(){
 var imageWidth = $(this).width();
 var imageHeight = $(this).height();    
 $(this).attr('width', imageWidth);
 $(this).attr('height', imageHeight);
 $(this).closest('li').css("width", imageWidth);
});

answered Jun 30, 2011 at 16:03

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

7 Comments

Jonas Thomsen Over a year ago

This is the shizzle ! Thank you! testing :)

Jonas Thomsen Over a year ago

Humm wierd thing. The $(this).closest('li').css("width", imageWidth); is setting the same width for all the li's - again.

Nicola Peluchetti Over a year ago

show us your markup. this code assumes you have an img inside a 'li' or maybe create a fiddle

Nicola Peluchetti Over a year ago

I made this fiddle: if you look at the result with firebug you can see that the result is correct jsfiddle.net/kV9Lr (first li: width 200px, second li 300px, fourth li 400px)

Jonas Thomsen Over a year ago

It does not set the style="width:xx" for the li's. And my image(s) has not got a width-attr before i run my function.

|

petraszd · Accepted Answer · 2011-06-30 16:04:02Z

0

$("#slider1 li img").each(function(){
    var imageWidth = $(this).width();
    var imageHeight = $(this).height();    
    $(this).parent().attr('width', imageWidth);
    $(this).parent().attr('height', imageHeight);
});

answered Jun 30, 2011 at 16:04

petraszd

4,3051 gold badge22 silver badges12 bronze badges

Comments

helloandre · Accepted Answer · 2011-06-30 16:04:54Z

0

That's because the selector you're using for setting your '#slider1 li' width is setting them all at the same time (to whatever the last imageWidth was). You need to only set the .parent() width.

answered Jun 30, 2011 at 16:04

helloandre

10.8k9 gold badges50 silver badges64 bronze badges

Collectives™ on Stack Overflow

Taking attributes and using the as styles with jquery .each()

4 Answers 4

2 Comments

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related