Jquery从父级设置图像尺寸答案

【问题标题】：Jquery to set img dimensions from parentJquery从父级设置图像尺寸
【发布时间】：2011-11-16 08:34:28
【问题描述】：

我正在做导航。

它是一个 ul 列表。 “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>

这是在正确的道路上......

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

【问题讨论】：

您最后的 css 定义隐藏了图像。你为什么拥有它？如果要隐藏图像，高度和宽度重要吗？
第一段说...有一个 fadeIn/fadeOut 已经正常工作...我一直在编辑 css 所以让我也在这里编辑它

标签： javascript jquery parent-child

【解决方案1】：

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

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/

【讨论】：

+1 我也很喜欢这个解决方案。虽然 closest 会为每个对象运行两次吗？
@natedavisolds - 是的，好电话。这可以通过使用.each() 来避免。
啊太棒了。这工作，以及其他。我遇到了一个很难解释的问题。我最后只是用 css #nav li span img {width:10px} 预设了图像的宽度，所以它不会在脚本运行之前拉伸 li。啊，很难形容。不过谢谢。

【解决方案2】：

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

#nav li img {
    width: 100%;
}

【讨论】：

嗯。它适用于任何 100% 及以上宽度的图像，但它似乎不适用于低于 100% 的图像宽度
@AlexAnonymous - 如果它与您的布局兼容，请尝试将 img 或其父范围设置为 position: absolute。这应该可以解决 li 小于 img 的问题。

【解决方案3】：

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

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

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

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

【讨论】：