jquery从父母设置img尺寸

它是一个ul列表。 'a'标签和'span'位于相同的空间中，并且跨度包含隐藏的图像。图像确实是fadeIn/fadeOut，它是成功的。我试图设置宽度的IMG /跨度的李（父母）的宽度

我似乎不能friggin做到这一点。请帮忙。

<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李跨度的高度和宽度从父相同，而不是...

然后我试过这样：

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

来源

2011-11-16 Alex Anonymous

您上次的CSS定义隐藏图像。你为什么拥有它？如果你隐藏图像，高度和宽度是否重要？ – gilly3

第一段说... theres fadeIn/fadeOut已正常工作......我一直在编辑css，所以让我在这里编辑它 –

使用.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/

来源

2011-11-16 00:14:54 gilly3

+1我真的很喜欢这个解决方案。尽管每个对象都会运行两次“最接近”的搜索结果吗？ – natedavisolds

@natedavisolds - 是的，很好的电话。这可以通过使用'.each（）'来代替。 – gilly3

啊真棒。这工作，以及其他人。我遇到了一个难以解释的问题。我结束了预先设置的图像的宽度与css'#nav li span img {width：10px}'，所以它不会在脚本运行之前拉伸li。它很难形容。但是谢谢你。 –

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

#nav li img { 
    width: 100%; 
}

来源

2011-11-16 00:16:06

hmm。它适用于任何100％宽度的图像，但它似乎不适用于图像100％以下的宽度 –

@AlexAnonymous - 如果它与布局兼容，请尝试将img或其父跨度设置为'位置：绝对'。这应该可以解决这个问题，比li小。 – gilly3

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

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

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

应该工作，但未经测试。

来源

2011-11-16 00:23:20 natedavisolds

jquery从父母设置img尺寸

回答

相关问题