Получение атрибутов и использование стилей как с помощью jquery .each ()

Question

Полагаю, это довольно простой вопрос.

Я хочу дать своим li-тегам ширину, соответствующую изображению внутри него.До сих пор я получаю свои атрибуты изображения для каждого.

$("#slider1 li img").each(function(){
 var imageWidth = $(this).width();
 var imageHeight = $(this).height();    
 $(this).attr('width', imageWidth);
 $(this).attr('height', imageHeight);
});

Но я не могу понять, как я передаю imageWidth в мой li-тег.Я попытался с:

$("#slider1 li").css("width", imageWidth);

Но это просто делает одинаковую ширину для всех li.

Спасибо за помощь:)

РЕДАКТИРОВАТЬ: Моя разметка:

<ul id="slider1"> 
<li><img src="tester.jpg"/></li> 
<li><img src="tester2.jpg"/></li> 
<li><img src="tester3.jpg"/></li> 
<li><img src="tester4.jpg"/></li> 
<li><img src="tester.jpg"/></li> 
<li><img src="tester2.jpg"/></li>
</ul> 

Answer 1

Вы можете напрямую вызвать только родительский li, который содержит элемент img, например:

$(this).parent('li').css('width',imageWidth);

Примечание: это работает, только если img только на один уровень ниже li. В противном случае используйте .closest('li'). parent будет проходить только на один уровень вверх, где closest будет продолжать проходить по дереву DOM, пока не найдет указанный элемент.

Answer 2

Вы должны сделать:

 $(this).closest('li').css("width", imageWidth);

как это

$("#slider1 li img").each(function(){
 var imageWidth = $(this).width();
 var imageHeight = $(this).height();    
 $(this).attr('width', imageWidth);
 $(this).attr('height', imageHeight);
 $(this).closest('li').css("width", imageWidth);
});

Answer 3

Это потому, что селектор, который вы используете для установки ширины '#slider1 li', устанавливает их все одновременно (независимо от того, каким было последнее значение imageWidth). Вам нужно только установить ширину .parent().

Answer 4

$("#slider1 li img").each(function(){
    var imageWidth = $(this).width();
    var imageHeight = $(this).height();    
    $(this).parent().attr('width', imageWidth);
    $(this).parent().attr('height', imageHeight);
});