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 {&nbsp; opacity: 0.8;}img {&nbsp; display: block;&nbsp; width: 50px;&nbsp; height: 50px;&nbsp; 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">&nbsp; <div class="thumbnail">&nbsp; &nbsp; <img />&nbsp; </div>&nbsp; <div class="detail">In stock</div></div><div class="product" id="product-2">&nbsp; <div class="thumbnail">&nbsp; &nbsp; <img />&nbsp; &nbsp; <span class="out-of-stock-icon"></span>&nbsp; </div>&nbsp; <div class="detail">Out of stock</div></div><div class="product" id="product-3">&nbsp; <div class="thumbnail">&nbsp; &nbsp; <img />&nbsp; &nbsp; <span class="out-of-stock-icon"></span>&nbsp; </div>&nbsp; <div class="detail">Out of stock</div></div>

Answer 2

在您的情况下，您需要使用parent()(方法遍历 DOM 树中每个元素的直接父级) 并且 该css方法为所选元素设置或返回一个或多个样式属性。JavaScript<script>&nbsp; &nbsp; var elements = Array.from(document.querySelectorAll(".out-of-stock-icon"));&nbsp; &nbsp; for(var i=0; i < elements.length;i++) {&nbsp; &nbsp; &nbsp; &nbsp; elements[i].parentNode.style.opacity = 0.5;&nbsp; &nbsp; }</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(){&nbsp; if($(this).find(".out-of-stock-icon").length)&nbsp; &nbsp; $(this).find("thumbnail").css("opacity", 0.2);});$("product").each(function(){&nbsp; if($(this).find(".out-of-stock-icon").length)&nbsp; &nbsp; $(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">&nbsp; &nbsp; <thumbnail>&nbsp; &nbsp; &nbsp; Product 1&nbsp; &nbsp; &nbsp; &nbsp; <img>&nbsp; &nbsp; &nbsp; &nbsp; <!-- This product does not have the out-of-stock-icon -->&nbsp; &nbsp; </thumbnail>&nbsp; &nbsp; <detail></detail></product><product id="product-2">&nbsp; &nbsp; <thumbnail>&nbsp; &nbsp; Product 2&nbsp; &nbsp; &nbsp; &nbsp; <img>&nbsp; &nbsp; &nbsp; &nbsp; <span class="out-of-stock-icon"></span>&nbsp; &nbsp; </thumbnail>&nbsp; &nbsp; <detail></detail></product><product id="product-3">&nbsp; &nbsp; <thumbnail>&nbsp; &nbsp; Product 3&nbsp; &nbsp; &nbsp; &nbsp; <img>&nbsp; &nbsp; &nbsp; &nbsp; <span class="out-of-stock-icon"></span>&nbsp; &nbsp; </thumbnail>&nbsp; &nbsp; <detail></detail></product>