JQuery - применить CSS к совпадающим элементам
У меня есть 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 к элементам.
Мне нужно запускать это только в том случае, если найдено соответствие класса изображения. Мне нужно работать с селекторами в обратном направлении, поэтому я не думал, что CSS будет работать в этом случае.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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);
}
Отлично работает, спасибо! Есть ли способ применить только align-item stretch к .container, в котором есть изображения с классом соответствия? у меня есть несколько других .containers, к которым я не хочу применять CSS
@ fightstarr20 да, конечно, пожалуйста, найдите отредактированный ответ по вашему запросу. Если вы хотите запустить этот блок сценария только для класса container, который содержит img с классом match, вам нужно сохранить $('img.match').closest('.container') в переменной и выполнять весь поиск jQuery только из этого контейнера.
@ fightstarr20 помогает ли это с твоей проблемой? Не стесняйтесь задавать нам дополнительные вопросы. Если этот ответ поможет решить вашу проблему, отметьте его как принятый. Спасибо!
Есть ли конкретная причина, по которой вам нужно использовать для этого jQuery? CSS имел бы гораздо больше смысла.