jQuery: присвойте каждому родителю <figure> ту же ширину, что и его потомку <img>

jquery html css

212 просмотра

1 ответ

Каждое изображение контейнера (рисунок) нужно взять ширину от изображения (IMG) он содержит и место (figcaption) с одной и той же ширины, что и контейнер.

Если я использую только один контейнер, он работает, но когда я использую несколько фигур, он устанавливает каждую фигуру с размером первого изображения.

Так что я делаю логическую ошибку в цикле foreach, но не могу найти решение. Любая помощь? Я довольно новичок в JQuery.

<figure><img><figcaption></figcaption></figure>
<figure><img><figcaption></figcaption></figure>
<figure><img><figcaption></figcaption></figure>

<script>  
$(document).ready(function(){
    //make figure the width of its image child
    $('figure').each(function() {
    var childWidth = $('figure img').width();
    console.log(childWidth);
    $('figure').width(childWidth);
    })
});
<script> 

посмотрите на HTML / CSS код

Автор: Kleajmp Источник Размещён: 08.11.2019 11:29

Ответы (1)


0 плюса

Решение

Вы выбираете и настраиваете все figureэлементы widthвнутри .each(). Замена

var childWidth = $("img", this).width(); // selects current `figure` `img`

за

var childWidth = $('figure img').width(); // selects all `img` elements

а также

$(this).width(childWidth); // selects current `figure`

за

$('figure').width(childWidth); // selects all `figure` elements
Автор: guest271314 Размещён: 20.08.2016 03:25
Вопросы из категории :
32x32