Как обратится к классу, который находится внутри другого класса

183

06 декабря 2021, 01:20

Доброе утро!) Подскажите пожалуйста, у меня .product__item используется в нескольких блоках, как указать в js, что добавлять класс нужно лишь тому у кого родитель .product-page-items ??

Такая структура html:

Мой js:

$('.icon-th-list').on('click', function(){   
if ($(this).parent('.product-page-items')) {
    $('.product__item').addClass('list');
}

});

Но он добавляет класс всем блокам, которые содержат внутри классы product__item

Answer 1

Это не работает по двум причинам... $(this) - это тот элемент, который запустил функцию (на который кликнули). .parent("селектор") - возвращает родительский элемент, если он совпадает с селектором, или сам элемент, если родитель не подходит. А это в любом случае в логическом контексте будет true.

Но даже если бы получилось правильно отфильтровать блоки с нужным родителем, затем всё всё равно добавляете класс всем: $('.product__item').addClass('list');

Можно было проверять родителя каждого блока, но есть простые CSS-селекторы:
• .class1 .class2 - через пробел, означает, что второй может быть где угодно внутри первого,
• .class1 > .class2 - только те class2, которые находятся непосредственно среди дочерних элементов class1. Чаще всего используется вариант с пробелом, т.к. этот придется переделать, если в будущем захочется изменить разметку.

$('.icon-th-list').on('click', function() { 
  $('.product-page-items .product__item').addClass('list'); 
});

.list { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<button class="icon-th-list">.......</button> 
 
<div class="product-page-items"> 
  <div class="product__item">Покрасить</div> 
</div> 
 
<div> 
  <div class="product__item">Не покрасить</div> 
</div>

А "ручная" проверка родителей выглядела бы так:

$('.icon-th-list').on('click', function() { 
  // Функция вызывается в контексте $('.icon-th-list'). Здесь $(this) — '.icon-th-list' 
 
  $('.product__item').each(function(){ 
    // У этой функции контекст вызова другой:  
    // Здесь $(this) - очередной '.product__item' внутри каждой проверки. 
 
    if( $(this).closest('.product-page-items').length > 0 ){  
     // можно без > 0 — любое число кроме 0, в логическом контексте будет true 
     // $(this).parent().hasClass('.product-page-items') 
      $(this).addClass('list'); 
    } 
  }); 
});

.list { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<button class="icon-th-list">.......</button> 
 
<div class="product-page-items"> 
  <div class="product__item">Покрасить</div> 
</div> 
 
<div> 
  <div class="product__item">Не покрасить</div> 
</div>

Создание эксклюзивного проекта в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Парсинг обьекта Jquery из JSON

Я сохраняю джквери объект который содержит в себе кучу других элементов, в JSON, что-бы хранить его в локальном хранилище, и при загрузке(обновлении)...

230

HTML