Question

我在做导航。

这是一个ul列表。 'a'标签和'span'位于同一空间，span包含隐藏的图像。图像确实fadeIn / fadeOut成功。我试图将img / span的宽度设置为li（父级）的宽度

我似乎无法做到这一点。请帮忙。

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

这在正确的道路上有点......

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

但它设置了所有#nav li span的高度和宽度相同而不是来自父...

然后我试过这个：

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

我知道结构很差，但我只是在测试。但没有它不起作用......

因此对于每个#nav li span和#nav li img我想将宽度设置为相应的父（li）宽度。

我想我正确地解释了这一点。大声笑。感谢。

继承人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

在您.width()的地方使用.each()，并使用.closest("li")代替.parent()，并且不要忘记return声明：

$('#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/

编辑：这是一个更有效的版本，可防止图像循环两次（感谢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/

Answer 2

叫我疯了，但你不能/不应该用CSS做这个吗？：

#nav li img {
    width: 100%;
}

Answer 3

假设CSS设置正确（即块元素）。

$('#nav li').each(function() {
  var $li = $(this);

  $li.find('span, span img').css({ width: $li.width(), height: $li.height()});
});

应该可以工作但未经测试。

Jquery从父级设置图像尺寸

3 个答案: