Проверка элемента в другом элементе в js?

Question

[Axel030392]

Здравствуйте. Есть мини корзина, в котором добавляются товары (итемы). В кажом итеме есть особый див, который в зависимости от параметров в его span должнен быть срыт или нескрыт.

Примерная верстка такая

<div class="elementor-menu-cart__product woocommerce-cart-form__cart-item cart_item">
какие то дивы
<div class="meta_wc">
			<ul> <li>size: <span class="first_size">L</span>
		</li>
		<li>color: Light Pink</li>
	
			</ul></div>
</div>
// много таких же динамически создаваемых итемов
<div class="elementor-menu-cart__product woocommerce-cart-form__cart-item cart_item">
</div>

Соответсвтенно в зависимости от того, пустой ли span class="first_size", должно зависить, скрыт или не скрыт. Делаю вот такой скрипт, но он вообще нереагирует, объясните пожалуйста

setInterval(function(){
    var parent = document.querySelectorAll('.cart_item');
	var i = 0; i<parent.length; i+=1;
	var elems1 = parent[i].querySelectorAll('.meta_wc');
	var elems = parent[i].querySelectorAll('.first_size');
		
if (elems.innerHTML == '' ) {
	elems1.style.display = 'none';
	
	};	
}, 1000);

Comments

[Kentavr16]

ты на коллекции элементов elems вызываешь innerHTML.

[Axel030392]

Kentavr16, И что? в чем ответ или подсказка. Допустим я переименую elems в dddd, что то измениться? Как мне проверить innerHTML в этой коллекции?

[WbICHA]

Axel030392,

И что?

Может стоит начать вообще с основ-основ?

[Ankhena]

const elems = document.querySelectorAll('.first_size');
elems.forEach(elem => {
  if(!elem.innerHTML) {
    elem.closest('.meta_wc').classList.add('block-hide');
  }
})

.block-hide {
  display: none;
}

[Сергей delphinpro]

Axel030392,

в чем ответ или подсказка.

В коллекции несколько элементов. У каждого элемента есть свойство innerHTML. Но у самой коллекции этого свойства нет.

[Axel030392]

Ankhena, спасибо за ответ, а как оно должно работать? Тут же нету родителя по которому оно и должно искаться?

[Ankhena]

Axel030392, ищем "размер", если пустой, скрываем предка .meta_wc. Вроде всё, что нужно сделать.

Зачем в логике вашего скрипта искать всю карточку, а потом ещё в ней разных детей, не понятно.

[Ankhena]

Axel030392, и гораздо удобнее скрывать элементы через класс, а не напрямую через style. Точнее, скрывать ещё куда ни шло, а вот возвращать совсем неудобно.

А ещё логичнее сразу не добавлять, то чего не должно быть.

[Axel030392]

Ankhena, Так это динамический контент, который подтягивает товары через интеграция в вордпрес(вукомерц) с printify. И так получается, что в одних товарах есть атрибуты которые вукомерц видет, а в других не видет. Вот поэтому токое извращение))

Answer 1

[Nemo Dev]

Немного неправильно сделан код JS

Исправлено:

setInterval(function(){
var parent = document.querySelectorAll('.cart_item');
for(let i = 0; i<parent.length; i++){
	var elems1 = parent[i].querySelectorAll('.meta_wc');
	var elems = parent[i].querySelectorAll('.first_size');
if (elems.innerHTML == '' ) {
	elems1.style.display = 'none';
	};	
}
}, 1000);

Отсутствует перебор документов и просто нечего записывать, если что то не так, жду исправление в коммах
UPD: цикл if был вне for.
Т.к нету всего кода я не могу полноценно ответить.

Comments

[Axel030392]

Эх, не хочет работать этот вариант. Даже прописал полный класс дива как

var parent = $(document.querySelectorAll('.elementor-menu-cart__product.woocommerce-cart-form__cart-item.cart_item'));

Почему это может не работать?

[Ankhena]

Axel030392, конечно, не хочет.
Условие из цикла вывалилось и не знает у кого проверять.

[Nemo Dev]

Ankhena, о боже, точно, извиняюсь.

[Axel030392]

Семен Nemo Dev, Большое спасибо, немного подправил и он заработал. Поменял querySelectorAll на querySelector, так как эти элименты должны обращаться только внутри элемента из цикла

setInterval(function(){
var parent = document.querySelectorAll('.cart_item');
for(let i = 0; i<parent.length; i++){
	var elems1 = parent[i].querySelector('.meta_wc');
	var elems = parent[i].querySelector('.first_size');
if (elems.innerHTML == '' ) {
	elems1.style.display = 'none';
	};	
}
}, 1000);

[Nemo Dev]

Axel030392, незачто, буду благодарен если отметишь как решение:)