Могу ли я использовать Jquery, чтобы найти, а затем установить ширину изображения?

Question

Я использую сценарий слайд-шоу, которому нужны размеры каждого изображения для правильной работы. Будет более 50 изображений, которые клиент должен будет добавить в измерения.

Есть ли скрипт, который я могу использовать, который найдет ширину всех изображений в неупорядоченном списке с идентификатором «scroller», а затем установит ширину, как это было бы установлено в теге изображения?

Если бы кто-нибудь мог помочь мне написать это и, возможно, объяснить, что делает каждый раздел, я был бы очень признателен.

И если вы ищете код, вот он.

До кода JQuery.

<ul id="scroller">
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
</ul>

После кода JQuery.

<ul id="scroller">
<li><img src="image.jpg" width="100"></li>
<li><img src="image.jpg" width="350"></li>
<li><img src="image.jpg" width="70"></li>
<li><img src="image.jpg" wudth="250"></li>
</ul>

Изображения будут иметь разную ширину, но одинаковую высоту.

Answer 1

Да, вы могли бы.Это действительно очень интуитивно понятно.

$('image selector').width(); //to access width
$('image selector').width(N); //to set width to Npx.

Чтобы просмотреть все из них, вы будете использовать .each().

$('#scroller img').each(function() {
    //Do stuff width each image. $(this).
}

---

Возможно, вы захотите знать, что выМожно захватить существующую ширину и установить ее, но только после полной загрузки элемента.Это может вызвать некоторую нервозность в старых браузерах, поэтому стоило бы спрятать изображения, захватить существующие измерения, выполнить преобразование, а затем затемнить их все или что-то вроде этого.Спасибо @ Точильный камень

---

$(function() {

    $('#scroller img').each(function() {
        $(this).attr('width', $(this).width());
    });

});

Answer 2

$('#scroller').find('img').each(function() {
   // $(this).width()
   // Implement your stuff
});

Answer 3

$('#scroller img').each(function(){
var t=$(this);
    t.load(function(){
        t.attr('width', t.attr('width'));
    });
});

.each прокручивает все изображения внутри #scroller ul.

jQuery может получить ширину изображения только после его полной загрузки, поэтому .load.

Все остальное довольно просто. Используйте jQuery API документы для получения дополнительной информации.