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

Question

[kamisarlapsha]

Привет! Есть блоки

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

и у них может быть дочерний элемент span class="special-new--stiker">NEW</span> или

<span class="special-price--stiker">Второй элемент</span>

. Но может быть ситуация, когда они могут быть оба у родителя product-layout product-list. И мне необходимо добавить класс к родителю, когда их два. Заранее спасибо!

Должно получится так:

<div class="product-layout product-list">
<span class="special-new--stiker">NEW</span>
<!--содержимое-->
</div>
<div class="product-layout product-list two-stikers"> <!--Элемент special-new--stiker и special-price--stiker , поэтому добавляем класс 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>

Answer 1

[Владимир Проскурин]

$('.product-list').each(function() {
   var $this = $(this);
   if ($this.find('span').length === 2) {
      $this.addClass('two-stikers');
   }
});

ну или не через span искать, а $this.find('span[class^="special-"]'). А еще лучше, добавить к span общий класс, и по нему искать.

Comments

[kamisarlapsha]

Добавил общий класс special-stiker, но код не работает.
Вот js код:

$('.product-layout').each(function() {
       var $this = $(this);
       if ($this.find('.special-stiker').length === 2) {
          $this.addClass('two-stikers');
       }
    });

[Владимир Проскурин]

kamisarlapsha, все отлично работает https://jsfiddle.net/y3t1gzjd/ смотрите, где у вас скрипт выполняется. Он должен выполняться после создания этих html элементов. Можете попробовать обернуть в $(function() { /* code */ }). Если этот html код добавляется после загрузки страницы, например через ajax, то нужно мой js код выполнять после добавления этого html кода.

[kamisarlapsha]

У меня до этого выполняется условие, которое и создаёт special-price--stiker. Как выполнить это условие после него ? Подскажите, если не трудно.

[Владимир Проскурин]

kamisarlapsha, ну этот код и располагайте после этого условия.

[kamisarlapsha]

Спасибо большое! Я могу расположить этот код после другого условия ? Точнее вот такая конструкция, как у меня сейчас, правильна будет ?

$(document).ready(function() {
if() {
//Создаём special-price--stiker
};
$(".product-layout.product-list").each(function() {
  var $container = $(this);
  if ($container.find(".special-new--stiker, .special-price--stiker").length === 2) {
    $container.addClass(".two-stikers");
  }
});
});

[Владимир Проскурин]

kamisarlapsha, да, только код, который скинул вам товарищ ниже, имеет ошибку.
не
$container.addClass(".two-stikers");
а
$container.addClass("two-stikers");
без точки, т.к. это не селектор. Лучше воспользуйтесь моим кодом, он более универсален, вдруг появится другая иконка, или вы захотите сменить иконку, а он будет работать, в отличии от этого.

[kamisarlapsha]

Воспользовался вашим кодом. Спасибо!

Answer 2

[profesor08]

Пробегись по всем контейнерам и проверь наличие элементов простым селектором.

$(".product-layout.product-list").each(function() {
  let $container = $(this);

  if ($container.find(".special-new--stiker, .special-price--stiker").length === 2) {
    $container.addClass(".two-stikers");
  }
});