Javascript Jquery从父级设置img维度

我在做导航

这是一份保险单。“a”标记和“span”位于同一空间，并且span包含一个隐藏的图像。 图像进行淡入/淡出，这是成功的。 我正在尝试将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>

但它设置了所有的#导航李跨度高度和宽度相同，而不是从父

然后我试过这个：

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

在有

.each（）

的地方使用

.width（）

，并使用

.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(); }); 

编辑：这里有一个更有效的版本，可以防止图像循环两次（感谢natedavisolds）：

在您拥有的

.each（）

位置使用

.width（）

，并使用

.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(); }); 

编辑：这里有一个更有效的版本，可以防止图像循环两次（感谢natedavisolds）：

---

叫我疯子，但你不能/不应该用CSS做这件事吗

#nav li img {
    width: 100%;
}

---

你可以说我疯了，但你不能/不应该用CSS来做这件事吗

#nav li img {
    width: 100%;
}

---

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

---

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

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

---

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

hmm。它适用于图像100%宽度及以上的任何内容，但对于图像100%宽度以下的内容似乎不起作用image@AlexAnonymous-如果与您的布局兼容，请尝试将img或其父span设置为

位置：绝对
。这应该用一个比img.hmm小的li来解决这个问题。它适用于图像100%宽度及以上的任何对象，但对于图像100%宽度以下的对象似乎不起作用image@AlexAnonymous-如果与您的布局兼容，请尝试将img或其父span设置为
位置：绝对
。这应该可以用比img小的li解决问题。+1我也非常喜欢这个解决方案。尽管将为每个对象运行两次最近的
查找吗？@natedavisolds-是的，很好的调用。这可以通过使用
.each（）
来避免。啊，太棒了。这和其他方法一样有效。我遇到了一个很难解释的问题。最后，我用css
#nav li span img{width:10px}
预设了图像的宽度，这样它就不会在脚本运行之前拉伸li。啊很难形容。但是谢谢你。我也很喜欢这个解决方案。尽管将为每个对象运行两次最近的
查找吗？@natedavisolds-是的，很好的调用。这可以通过使用
.each（）
来避免。啊，太棒了。这和其他方法一样有效。我遇到了一个很难解释的问题。最后，我用css
#nav li span img{width:10px}
预设了图像的宽度，这样它就不会在脚本运行之前拉伸li。啊很难形容。但是谢谢你，你最后的css定义隐藏了图像。你为什么有它？如果你隐藏图像，高度和宽度重要吗？第一段说。。。有一个fadeIn/fadeOut已经正常工作了。。。我一直在编辑css，所以让我在这里编辑它，因为您的上一个css定义隐藏了图像。你为什么有它？如果你隐藏图像，高度和宽度重要吗？第一段说。。。有一个fadeIn/fadeOut已经正常工作了。。。我一直在编辑css，所以让我也在这里编辑它
$('#nav li').each(function() {
  var $li = $(this);

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