Q:

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

Доброе утро!) Подскажите пожалуйста, у меня .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

A:

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

