如何使用js選擇父div元素

Question

這是我的 html 代碼：

<div class="w-grid-list">
<article class="product_cat-19">
    <div class="w-grid-item-h">
        <a class="w-grid-item-anchor" href="#"></a>
            <div class="w-vwrapper">
                <div class="w-post-elm">
                    <a href="">
                        title1
                    </a>
                </div>
                <div class="w-post-elm">
                    <span class="w-post-elm-before">color code : </span>
                    <span class="sku">228</span>
                </div>
                <div class="w-html">color</div>
            </div>  
    </div>
</article>
<article class="product_cat-19">
    <div class="w-grid-item-h">
        <a class="w-grid-item-anchor" href="#"></a>
            <div class="w-vwrapper">
                <div class="w-post-elm">
                    <a href="">
                        title2
                    </a>
                </div>
                <div class="w-post-elm">
                    <span class="w-post-elm-before">color code : </span>
                    <span class="sku">229</span>
                </div>
                <div class="w-html">color</div>
            </div>  
    </div>
</article>
</div>

<div class="owl-stage">
<div class="owl-item active" style="width: 204px;">
    <article class="product_cat-18">
        <div class="w-grid-item-h">
            <div class="w-hwrapper">
                <div class="w-vwrapper">
                    <div class="w-post-elm">
                        <a href="#"></a></div>
                            <h2 class="w-post-elm">
                                <a href="#">title of product1</a>
                            </h2>
                    <div class="w-post-elm">
                        <span class="Price-amount">140<span class="Price-currencySymbol">$</span></span>
                    </div>
                </div>
            </div>
        </div>
    </article>
</div>
<div class="owl-item active" style="width: 204px;">
    <article class="product_cat-19">
        <div class="w-grid-item-h">
            <div class="w-hwrapper">
                <div class="w-vwrapper">
                    <div class="w-post-elm">
                        <a href="#"></a></div>
                            <h2 class="w-post-elm">
                                <a href="#">title of product2</a>
                            </h2>
                    <div class="w-post-elm">
                        <span class="Price-amount">120<span class="Price-currencySymbol">$</span></span>
                    </div>
                </div>
            </div>
        </div>
    </article>
</div>
</div>

我想隱藏（樣式顯示：無）Div 元素，僅使用“owl-item”類，它具有“product_cat-19”類的“article”標簽。

我的 JavaScript 代碼：

<script>
    // get the heading from the first article
    const product_cat_19 = document.querySelector('.product_cat-19');
    // get its parent, the current article
    const currentArticle = product_cat_19.parentNode.style.display='none';
</script>

此代碼無法隱藏“owl-item”類。 但是用“w-grid-list”類隱藏div。 有什么方法可以只用 css 或需要 js 來做到這一點？ 我在谷歌上搜索，發現只有解決這個問題的 JavaScript 無法正常工作的解決方案。 任何人都可以幫助我編輯我的代碼？

Answer 1

您可以使用 JavaScript 和 CSS 抓取元素，如下所示：

JavaScript：

const el = document.querySelectorAll('.owl-item .product_cat-19');
el[0].style.display = 'none';

CSS：

.owl-item > .product_cat-19 {
   display: none;
 }

Answer 2

querySelector()將只匹配它找到的第一次出現。 您需要querySelectorAll()來遍歷所有元素，然后檢查父母是否有（或沒有）您要查找的類：

示例： https : //codepen.io/gc-nomade/pen/YzXQeyN

 for (let e of document.querySelectorAll('.product_cat-19')) { var dady = e.parentNode; if (dady.classList.contains("owl-item")) { dady.style.display = "none"; } }

 <div class="w-grid-list"> <article class="product_cat-19"> <div class="w-grid-item-h"> <a class="w-grid-item-anchor" href="#"></a> <div class="w-vwrapper"> <div class="w-post-elm"> <a href=""> title1 </a> </div> <div class="w-post-elm"> <span class="w-post-elm-before">color code : </span> <span class="sku">228</span> </div> <div class="w-html">color</div> </div> </div> </article> <article class="product_cat-19"> <div class="w-grid-item-h"> <a class="w-grid-item-anchor" href="#"></a> <div class="w-vwrapper"> <div class="w-post-elm"> <a href=""> title2 </a> </div> <div class="w-post-elm"> <span class="w-post-elm-before">color code : </span> <span class="sku">229</span> </div> <div class="w-html">color</div> </div> </div> </article> </div> <div class="owl-stage"> <div class="owl-item active" style="width: 204px;"> <article class="product_cat-18"> <div class="w-grid-item-h"> <div class="w-hwrapper"> <div class="w-vwrapper"> <div class="w-post-elm"> <a href="#"></a> </div> <h2 class="w-post-elm"> <a href="#">title of product1</a> </h2> <div class="w-post-elm"> <span class="Price-amount">140<span class="Price-currencySymbol">$</span></span> </div> </div> </div> </div> </article> </div> <!-- will be hidden --> <div class="owl-item active" style="width: 204px;"> <!-- because of this child --> <article class="product_cat-19"> <div class="w-grid-item-h"> <div class="w-hwrapper"> <div class="w-vwrapper"> <div class="w-post-elm"> <a href="#"></a> </div> <h2 class="w-post-elm"> <a href="#">title of product2</a> </h2> <div class="w-post-elm"> <span class="Price-amount">120<span class="Price-currencySymbol">$</span></span> </div> </div> </div> </div> </article> </div> </div>

product2 的父級是隱藏的，如果這是你要找的。 可以有很多，它會隱藏每個.owl-item持有一個類.product_cat-19的直接孩子。

---

如果你想隱藏任何沒有.w-grid-list父容器，

以同樣的方式檢查課程然后if(okay){leave it} else { hide it}

 for (let e of document.querySelectorAll('.product_cat-19')) { var dady = e.parentNode; if (dady.classList.contains("w-grid-list")) {} else { dady.style.display="none"; } }

 <div class="w-grid-list"> <article class="product_cat-19"> <div class="w-grid-item-h"> <a class="w-grid-item-anchor" href="#"></a> <div class="w-vwrapper"> <div class="w-post-elm"> <a href=""> title1 </a> </div> <div class="w-post-elm"> <span class="w-post-elm-before">color code : </span> <span class="sku">228</span> </div> <div class="w-html">color</div> </div> </div> </article> <article class="product_cat-19"> <div class="w-grid-item-h"> <a class="w-grid-item-anchor" href="#"></a> <div class="w-vwrapper"> <div class="w-post-elm"> <a href=""> title2 </a> </div> <div class="w-post-elm"> <span class="w-post-elm-before">color code : </span> <span class="sku">229</span> </div> <div class="w-html">color</div> </div> </div> </article> </div> <div class="owl-stage"> <div class="owl-item active" style="width: 204px;"> <article class="product_cat-18"> <div class="w-grid-item-h"> <div class="w-hwrapper"> <div class="w-vwrapper"> <div class="w-post-elm"> <a href="#"></a> </div> <h2 class="w-post-elm"> <a href="#">title of product1</a> </h2> <div class="w-post-elm"> <span class="Price-amount">140<span class="Price-currencySymbol">$</span></span> </div> </div> </div> </div> </article> </div> <!-- will be hidden --> <div class="owl-item active" style="width: 204px;"> <!-- because of this child --> <article class="product_cat-19"> <div class="w-grid-item-h"> <div class="w-hwrapper"> <div class="w-vwrapper"> <div class="w-post-elm"> <a href="#"></a> </div> <h2 class="w-post-elm"> <a href="#">title of product2</a> </h2> <div class="w-post-elm"> <span class="Price-amount">120<span class="Price-currencySymbol">$</span></span> </div> </div> </div> </div> </article> </div> </div>