Question

Im doing a nav.

Its a ul list. the ‘a’ tags and ‘span’s are in the same space and the span contains an image that is hidden.
The image does fadeIn/fadeOut which is successful.
Im trying to set the width of the img/span to the width of the li(the parent)

i cant seem to friggin do it. please help.

<ul id="nav">
    <li><a href="#">Web<br />Design</a><span><img src="images/nav-over.png"  height="100px" /></span></li>
    <li><a href="#">Graphic<br />Design</a><span><img src="images/nav-over.png"  height="100px" /></span></li>
    <li><a href="#">Our<br />Work</a><span><img src="images/nav-over.png" height="100px" /></span></li>
    <li><a href="#">SEO</a><span><img src="images/nav-over.png" height="100px" /></span></li>
</ul>

this was kinda on the right path…

var h = $('#nav li img').parent().height();
var w = $('#nav li img').parent().width();
$('#nav li img').width(w).height(h);

but it set all of the #nav li span height and width the same and not from the parent…

then i’ve tried this :

$('#nav li span').each(function(){$(this).parent().width()});
$('#nav li span img').each(function(){$(this).parent().width()});

which i know is poorly structured but i was just testing. but no it didn’t work…

so for each #nav li span and #nav li img i want to set the width to the corresponding parent(li) width.

i think i explained this correctly. lol. thanks.

heres the css

 #nav {
    list-style:none; width:608px; height:100px; display:block; padding:0; margin:0; position:relative
}
#nav li {
    background:url(images/nav-div.jpg) right top no-repeat; float:left; text-align:center;height:100px;
}
#nav li a {
    color:#565555; font-size: 18px; letter-spacing:10px; line-height:25px; text-transform:uppercase; text-decoration:none;height:100px; display:block; padding:0 19px 0 19px; position:relative; top:0; left:0;z-index:900
}
#nav li a:hover {
    color:#eaeaea   
}

#nav li span {
    position:relative; top:-100px; left:0; z-index:800; opacity:0.0;
}

Answer 1

Use .width() where you have .each(), and use .closest("li") instead of .parent(), and don’t forget the return statements:

$('#nav li span img').width(function () { return $(this).closest("li").width(); });
$('#nav li span img').height(function () { return $(this).closest("li").height(); }); 

http://jsfiddle.net/KzhgQ/

Edit: Here’s a more efficient version that prevents looping the images twice (thanks natedavisolds) :

$('#nav li span img').each(function () {
    var img = $(this);
    var listItem = img.closest("li");
    img.width(listItem.width()).height(listItem.height());
});

http://jsfiddle.net/KzhgQ/1/