javascript - jQuery - 将 CSS 应用于匹配项

Question

我有一个看起来像这样的 html 布局..

<div class="container>

    <div class="panel">
        <div>
            <div>
                <div>
                    <img class="match" src="myimage.jpg">
                </div>
            </div>
        </div>
    </div>

    <div class="panel">
       <div>
            <div class="item">
                <div class="img_container">
                    <img class="match">
                </div>
            </div>
        </div>
    </div>

</div>

我正在尝试修改它，使其看起来像这样......

<div class="container style="align-items: stretch;">

    <div class="panel">
        <div>
            <div>
                <div>
                    <img class="match" src="myimage.jpg">
                </div>
            </div>
        </div>
    </div>

    <div class="panel">
       <div style="height: 100%;">
            <div class="item style="height:  100%;">
                <div class="img_container" style="height:  100%;">
                    <img class="match" src="myimage.jpg">
                </div>
            </div>
        </div>
    </div>

</div>

我研究过 CSS 选择器，但我认为它们在这种情况下对我不起作用。

我如何使用 jQuery 做到这一点？我希望它检测容器类是否存在，然后将 CSS 应用于元素。

Answer 1

我猜是这样的。请尝试一下是否有效

// if el with container class exists will add align-item css
// $('.container').css('align-items','stretch');
// updated, will only apply 'align-items' on container which contains img with class 'match'
$('img.match').closest('.container').css('align-items','stretch');

// assign div with item class, its div parent, and img_container class with height:100%
$('.item').css('height','100%');
$('.img_container').css('height','100%');
$('.item').closest('div').css('height','100%');

// get the src of the first img el with class "match" and assign it to the 2nd img el with class "match"
var src = $('.match').first().attr('src');
if(src){ 
    $('.match').last().attr('src',src);
}