JQuery выберите HTML элемент, соответствующий данному условию, и измените его стиль CSS

Question

Я новичок в HTML, CSS и Jquery (вероятно, также Engli sh). У меня есть список таких продуктов (теги только образные):

<product id="product-1">
    <thumbnail>
        <img>
        <!-- This product does not have the out-of-stock-icon -->
    </thumbnail>
    <detail></detail>
</product>

<product id="product-2">
    <thumbnail>
        <img>
        <span class="out-of-stock-icon"></span>
    </thumbnail>
    <detail></detail>
</product>

<product id="product-3">
    <thumbnail>
        <img>
        <span class="out-of-stock-icon"></span>
    </thumbnail>
    <detail></detail>
</product>

Я пытаюсь найти один элемент продукта, внутри которого есть значок «нет в наличии». затем уменьшите непрозрачность миниатюры. Вот о чем я думаю:

if ($('product .out-of-stock-icon').length) {
  $('product thumbnail').css('opacity', '0.8');
}

Что я пытаюсь сделать (я не знаю, как правильно express):

for (x in product) {
  if (product[x].has('out-of-stock-icon') {
    product[x].itsThumbnail.setOpacity(0.8);
  }
}

И повороты Все миниатюры продуктов затемнены, а не только продукт, который я указал выше. Я знаю, что я сделал неправильно, но я не могу найти правильное решение, чтобы это исправить.

Это мой самый первый вопрос по stackoverflow. Если я что-то не сделал правильно, пожалуйста, дайте мне знать. Извините за моего кроткого Энгли sh, и спасибо, что помогли мне.

Answer 1

В вашем случае вам необходимо использовать parent() (метод переходит к непосредственному родителю каждого из этих элементов в дереве DOM), а метод css устанавливает или возвращает одно или несколько свойств стиля для выбранных элементов.

Javascript

<script>
    var elements = Array.from(document.querySelectorAll(".out-of-stock-icon"));
    for(var i=0; i < elements.length;i++) {
        elements[i].parentNode.style.opacity = 0.5;
    }
</script>

JQuery

<script>
$(".out-of-stock-icon").parent().css('opacity', 0.5);
</script>

Answer 2

Во-первых, ваш HTML недействителен. Ни один из элементов, которые вы используете, не является действительным. Вы должны исправить это. Я сделал это в приведенном ниже примере, но очевидно, что он делает предположения о вашем пользовательском интерфейсе.

Чтобы решить проблему, поднятую в вашем вопросе, вы можете использовать селектор :has

$('.product:has(.out-of-stock-icon) .thumbnail').addClass('oos');

.oos {
  opacity: 0.8;
}

img {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product" id="product-1">
  <div class="thumbnail">
    <img />
  </div>
  <div class="detail">In stock</div>
</div>

<div class="product" id="product-2">
  <div class="thumbnail">
    <img />
    <span class="out-of-stock-icon"></span>
  </div>
  <div class="detail">Out of stock</div>
</div>

<div class="product" id="product-3">
  <div class="thumbnail">
    <img />
    <span class="out-of-stock-icon"></span>
  </div>
  <div class="detail">Out of stock</div>
</div>

Answer 3

Вам нужно проверить, существует ли внутри продукта какой-либо предмет с классом out-of-stock-icon.

$("product").each(function(){
  if($(this).find(".out-of-stock-icon").length)
    $(this).find("thumbnail").css("opacity", 0.2);
});

$("product").each(function(){
  if($(this).find(".out-of-stock-icon").length)
    $(this).find("thumbnail").css("opacity", 0.2);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<product id="product-1">
    <thumbnail>
      Product 1
        <img>
        <!-- This product does not have the out-of-stock-icon -->
    </thumbnail>
    <detail></detail>
</product>

<product id="product-2">
    <thumbnail>
    Product 2
        <img>
        <span class="out-of-stock-icon"></span>
    </thumbnail>
    <detail></detail>
</product>

<product id="product-3">
    <thumbnail>
    Product 3
        <img>
        <span class="out-of-stock-icon"></span>
    </thumbnail>
    <detail></detail>
</product>

Answer 4

То, что вам нужно, это jquery 's parent() функция . Это дает вам первый родительский элемент в иерархии, совпадающий с селектором. Итак,

$('product .out-of-stock-icon').parent('thumbnail').css('opacity', '0.8');