时间戳

首页 > 解决方案 > 如何用js选择父div元素

javascript - 如何用js选择父div元素

问题描述

这是我的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需要吗？我在 Google 上进行了搜索，发现只有解决此问题的 JavaScript 无法正常工作的解决方案。任何人都可以帮助我编辑我的代码？

标签： javascripthtmlselect

解决方案

您可以使用 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;
 }

推荐阅读