Question

我有这个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);
    });
});

现在此代码仅返回最后一个图像的宽度。要改变什么，所以我可以将span元素的宽度与img相同？

由于

Answer 1

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

Answer 2

您只需更正一行：

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

替换为：

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

Answer 3

替换此行

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

与

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

说明：行$("ul li a span").width(theWidth);设置所有三个span元素的宽度 'each'循环运行3次 第一次时间将所有三个跨度设置为第一个图像的宽度。
第二时间将所有三个跨度设置为第二个图像的宽度。
...

Answer 4

答案在你自己的代码中，差不多......

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

Answer 5

您是否可以将<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});
    });
});

Answer 6

有很多方法，这对我有用。

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

将图像宽度设置为span标记

6 个答案: