Javascript: добавьте поля к элементу, если другой элемент внутри объекта превышает x пикселей. несколько объектов на странице

У меня есть объект (div), внутри которого есть два элемента (с классами).

Задача: когда высота элемента A меньше 40 пикселей, добавьте к элементу B 22px margin-top.

Однако на странице много объектов, и следующий код просто находит первый элемент A (имеет имя класса .list) и добавляет поля ко всем элементам B (имеет класс .product-image-container).

if ($('.list-name').height() < 40) {

    $('.product-image-container').css('margin-top','22px');
}

Заранее благодарю за любую помощь

Роб

ты можешь добавить свой HTML?

Sravan 11.04.2018 14:08

Когда вы используете селектор jQuery $(), он всегда выводит массив объектов элементов, даже если он всего один. Если у вас более одного .product-image-container, он всегда будет приносить все и настраивать все. Нам нужен ваш html, чтобы помочь

Calvin Nunes 11.04.2018 14:24
0
2
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот ваше необходимое решение,

  • Выполните цикл через все классы list-name, используя функцию $('.list-name').each().
  • Поднесите к нему следующий product-image-container, используя (obj).next('.product-image-container')
  • Измените CSS того, что вам нужно, $(obj).next('.product-image-container').css('margin-top', '20px')

$(document).ready(function(){
    $('.list-name').each(function(index, obj){
    console.log($(obj).height())
    if($(obj).height() > 20)
    {
       $(obj).next('.product-image-container').css('background', 'green')
    }
    });
    

});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div>
  <div class="list-name" style="height: 20px">list-name 1</div>
  <div class="product-image-container">product-image-container 1</div>
</div>

<div>
  <div class="list-name" style="height: 40px">list-name 2</div>
  <div class="product-image-container">product-image-container 2</div>
</div>


</body>
</html>

Пожалуйста, запустите приведенный выше фрагмент

Вот рабочая ДЕМО

Спасибо, ваше решение отлично работает. Однако, чтобы реализовать его в моей сети, я обнаружил, что он работает только для следующего div внутри объекта, и у моего объекта фактически есть три div, которые находятся между элементом A и элементом B, поэтому это решение не работает для этого. Спасибо за ответ.

Rob 13.04.2018 10:04

Поскольку вы не добавляли никаких html, я взял ваш html и написал ответ. Добавьте html, и я соответствующим образом обновлю свой ответ.

Sravan 13.04.2018 11:33

Другие вопросы по теме