设置图像宽度跨越标签

我有这样的HTML代码设置图像宽度跨越标签

<ul> 
    <li><a href="#"><img src="path_to_image1"><span>some text</span></a></li> 
    <li><a href="#"><img src="path_to_image2"><span>some text</span></a></li> 
    <li><a href="#"><img src="path_to_image3"><span>some text</span></a></li> 
</ul>

图像不同的宽度。

我需要设置SPAN元素的宽度为等于作为IMG宽度。下面是我写的看在StackOverflow上板的代码。

$(document).ready(function() { 
    $("ul li a").each(function() { 
     var theWidth = $(this).find("img").width(); 
     $("ul li a span").width(theWidth); 
    }); 
});

现在这段代码只返回最后一幅图像的宽度。要改变什么，所以我可以使用与img相同的span元素宽度？

由于

来源

2011-09-23 Johnatan

澄清：你的'ul'具有特定的宽度，例如'100px'。你希望你的'li'始终具有相同的宽度？所以如果'img'是'40px'，那么跨度必须是'60px'？ –

请记住，CSS中的'width'参数不适用于'inline'元素。 'a'和'span'默认都是内联的，因此它们不会声明'width'属性。如果这是可以接受的，你可以在实际的'li'上设置宽度。 –

@Kalle H.Väravas：在这种情况下，跨度应该是40px – Johnatan

答案是在自己的代码，几乎..

$(this).find("span").width(theWidth);

来源

2011-09-23 10:54:08

谢谢先生！它正在工作。 – Johnatan

$('ul li img').each(function() { 
    var imgWidth = $(this).width(); 
    $(this).next('span').css({'width': imgWidth}); 
});

来源

2011-09-23 10:50:59 simoncereska

替换此线

$("ul li a span").width(theWidth);

与

$(this).find('span').width(theWidth);

说明：$("ul li a span").width(theWidth);设置了所有三个元件span的宽度的行。
的“各自”循环运行3次。
的第一一次将所有三个跨距到第一图像的宽度。
秒时间它将所有三个跨度设置为第二个图像的宽度。
...

来源

2011-09-23 10:51:23 kalyfe

感谢您的解释，我现在明白了。 – Johnatan

你只需要更正一行：

$(this).find('span').width(theWidth);

：

$("ul li a span").width(theWidth);

与更换

来源

2011-09-23 10:54:22 Alex

你能只设置<li>的的宽度相同的宽度作为图像，并设置作为<span>display: block;

这些跨度将和它们的包含（<li>）一样宽，并且它可以为您节省一点额外的jquery，试图挖掘到跨度级别。

此外，为了加快你的jQuery选择器只需添加一个id到列表和目标，而不是试图匹配ul li a...;现在你所要做的就是匹配#widths。

例

<ul id="widths"> 
    <li><a href="#"><img src="path_to_image1"><span>some text</span></a></li> 
    <li><a href="#"><img src="path_to_image2"><span>some text</span></a></li> 
    <li><a href="#"><img src="path_to_image3"><span>some text</span></a></li> 
</ul> 

$(document).ready(function() { 
    $('#widths img').each(function() { 
     var imgWidth = $(this).width(); 
     $(this).next('span').css({'width': imgWidth}); 
    }); 
});

来源

2011-09-23 11:03:46

是的。问题是图像是绝对定位的，我不知道如何水平居中:)） – Johnatan

我认为居中绝对位置元素是一种使用'left：50％'和'margin-left：minus ;'...或类似的东西。 –

这种情况有解决的方法很多，这虽然为我工作。

$(document).ready(function() { 
    $("ul li a img").each(function (index) { 
     $(this).next().width($(this).width()).css("display", "block"); 
    }); 
});

来源

2011-09-23 12:33:49 Sitnam

设置图像宽度跨越标签

回答

相关问题