Как проверять у каких элементов есть дочерние элементы?

Question

[kamisarlapsha]

Есть много таких элементов

<div class="product-layout product-list"><!--содержимое--></div>

. В некоторые из них, по условию, добавляется элемент <span class="special-new--stiker">NEW</span> и получается:

<div class="product-layout product-list"><span class="special-new--stiker">NEW</span><!--содержимое--></div>

Необходимо проверить, есть ли в элементах product-layout product-list элемент special-new--stiker и далее уже выполнить условие. Как это можно сделать?

Answer 1

[Андрей]

//Vanilla
document.querySelectorAll(".product-layout > .special-new--stiker").forEach(function (n) {
console.log(n.parentNode);
})

//jQuery
$('.product-layout').has('.special-new--stiker')

Comments

[kamisarlapsha]

А если у меня есть элементыspecial-new--stiker и их родители product-layout. Но в этом случае у родителя есть ещё один элементspecial-price--stiker. И мне надо уже выполнять условие тогла, когда у родителя есть только эти два элемента. Как это сделать ?

Пытался сделать так, но класс добавляется ко всем special-new--stiker

$('.product-layout').each(function(){
        if($(this).has('.special-price--stiker')) {
            $('product-layout').children('.special-new--stiker').addClass('two-stikers');
        }
});

html код получается такой:

<div class="product-layout product-list">
<span class="special-new--stiker">NEW</span>
<!--содержимое-->
</div>
<div class="product-layout product-list">
<span class="special-new--stiker">NEW</span>
<span class="special-price--stiker">Второй элемент</span>
<!--содержимое-->
</div>
<div class="product-layout product-list">
<span class="special-new--stiker">NEW</span>
<!--содержимое-->
</div>
<div class="product-layout product-list">
<span class="special-new--stiker">NEW</span>
<!--содержимое-->
</div>

[Андрей]

kamisarlapsha, если нужно событие повесить

$('.product-layout').has('.special-new--stiker').on('click', function() {
  if ($(this).has('.special-price--stiker')) {
    //Есть .special-new--stiker и .special-price--stiker
  } else {
  //Есть только .special-new--stiker
  }
})

или прошарить DOM

$('.product-layout').has('.special-new--stiker').each(function() {
  if ($(this).has('.special-price--stiker')) {
    //Есть .special-new--stiker и .special-price--stiker
  } else {
  //Есть только .special-new--stiker
  }
})

[kamisarlapsha]

Если не трудно, можете подсказать, почему не работает. При условии, что есть .special-new--stiker и .special-price--stiker, я добавляю класс к product-layout. Но он добавляется ко всем code lang="html">product-layout, если у них есть special-new--stiker, а не только к тем, у кого есть .special-new--stiker и .special-price--stiker.

Вот js код:

$('.product-layout').has('.special-new--stiker').each(function() {
  if ($(this).has('.special-price--stiker')) {
      $(this).addClass('two-stikers');
  }
})

Нужно, что получилось так:

<div class="product-layout product-list">
<span class="special-new--stiker">NEW</span>
<!--содержимое-->
</div>
<div class="product-layout product-list two-stikers">
<span class="special-new--stiker">NEW</span>
<span class="special-price--stiker">Второй элемент</span>
<!--содержимое-->
</div>
<div class="product-layout product-list">
<span class="special-new--stiker">NEW</span>
<!--содержимое-->
</div>
<div class="product-layout product-list">
<span class="special-price--stiker">Второй элемент</span>
<!--содержимое-->
</div>

[Андрей]

kamisarlapsha, немного ошибся
if ($(this).has('span.special-price--stiker').length) {...

[Андрей]

В вашем случае можно еще проще написать

$('.product-layout').has('.special-new--stiker + .special-price--stiker').addClass('two-stikers');