Установите ширину изображения для тега span

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

Есть много способов обойти это, хотя у меня это получилось.

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

Answer 4

Можете ли вы просто установить ширину <li> на ту же ширину, что и изображение, и установить <span> как display: block;

В этом случае промежутки будут такими же широкими, как и их(<li>), и это избавляет вас от лишних jquery, пытающихся копать до уровня span.

Кроме того, чтобы ускорить работу вашего селектора jquery, просто добавьте идентификатор в список и выберите его вместо попыткисоответствовать 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 5

ответ в вашем собственном коде, почти ..

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

Answer 6

Заменить эту строку

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

с

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

Объяснение: строка $("ul li a span").width(theWidth); устанавливает ширину для всех трех span элементов.
Цикл «каждый» выполняется 3 раза.
first time устанавливает все три пролета в ширину first image.
секунда раз устанавливает все три диапазона на ширину секунды изображения.
...