设置图像宽度为span标签

Set image width to span tag

本文关键字：span 标签 图像 设置      更新时间：2023-09-26

我有这个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相同?

谢谢

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

你只需要更正一行:

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

替换为:

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

答案就在你自己的代码里，几乎…

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

替换这一行

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


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

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

能否将<li>的宽度设置为与图像相同的宽度，并将<span>设置为display: block;

span的宽度将与其包含的宽度一样(<li>)，这为您节省了一些额外的jquery，试图深入到span级别。

也，帮助加快你的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});
    });
});

有很多方法可以解决这个问题，但这对我来说很有效。

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