Это не работает по двум причинам... $(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>