JQuery 选择符合给定条件的 HTML 元素，并更改其 CSS 样式

Question

我对 HTML、CSS 和 Jquery 很陌生（可能也是英语）。我有一个这样的产品列表（标签只是象征性的）：<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');}我想要做什么（我不知道如何正确表达）：for (x in product) {  if (product[x].has('out-of-stock-icon') {    product[x].itsThumbnail.setOpacity(0.8);  }}事实证明，所有产品缩略图都变暗，而不仅仅是我上面指定的产品。我知道我做错了什么，但我无法找到正确的解决方案来解决这个问题。这是我在 stackoverflow 上的第一个问题。如果我做错了什么，请告诉我。抱歉我的英语不好，谢谢你帮助我。

Answer 1

首先，您的 HTML 无效。您使用的所有元素均无效。你需要纠正这个问题。我在下面的示例中这样做了，但显然这是对您的 UI 做出假设。

要解决您的问题中提出的问题，您可以使用: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 2

在您的情况下，您需要使用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 3

你需要的是jquery的parent()函数。它为您提供层次结构中第一个匹配选择器的父级。所以，

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

Answer 4

您必须检查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>