按类别选择具有特定子元素的元素使用javascript

我有一个产品列表，其结构如下面的HTML。按类别选择具有特定子元素的元素使用javascript

我试图选择class="www-components-menu-product-list--item_DgfZL"中包含类名称为class="www-components-product-card--cbd_2luC9"的元素的元素。

然后我想隐藏这些元素的点击功能。

请注意。我在页面上有很多这些项目，函数应该适用于所有可能的元素，而不仅仅是我在示例中的两个元素。

我已经明白如何用Jquery做到这一点，但我试图在这里避免Jquery。

这是我用javascript的尝试。

var itemClass = document.getElementsByClassName("www-components-menu-product-list--item_DgfZL"); 

for (i = 0; i < itemClass.length; i++) { 

     var insideItemClass = itemClass.getElementsByClassName("www-components-product-card--hybrid_2AD7v"); 

     for (i = 0; i < insideItemClass.length; i++) { 

      insideItemClass.style.display = "none"; 

     } 

}

HTML结构：

<div class="www-components-menu-product-list--item_DgfZL"> 

    <div class="www-components-product-card--card_2mjWk"> 


     <div> 

      <div class="www-components-product-card--hybrid_2AD7v www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);"> 

      </div> 


      <div class="www-components-product-card--description_3un8n" style="height: 38%;"> 

      </div> 

     </div> 

    </div> 

</div> 


<div class="www-components-menu-product-list--item_DgfZL"> 

    <div class="www-components-product-card--card_2mjWk"> 


     <div> 

      <div class="www-components-product-card--cbd_2luC9 www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);"> 

      </div> 


      <div class="www-components-product-card--description_3un8n" style="height: 38%;"> 

      </div> 

     </div> 

    </div> 

</div> 




<div class="www-components-menu-product-list--item_DgfZL"> 

    <div class="www-components-product-card--card_2mjWk"> 


     <div> 

      <div class="www-components-product-card--cbd_2luC9 www-components-product-card--backdrop_Nq0th" style="opacity: 1; transform: translateY(62%);"> 

      </div> 


      <div class="www-components-product-card--description_3un8n" style="height: 38%;"> 

      </div> 

     </div> 

    </div> 

</div>

我的错误

01:26:25.549 menubest.html:2923 Uncaught TypeError: itemClass.getElementsByClassName is not a function 
    at HTMLDivElement.<anonymous> (menubest.html:2923)

来源

2017-09-07 Aaron

的错误是正确的，因为'getElementsByClassName'返回一个HTML集合，所以你不能把'getElementsByClassName'上'itemClass'。 – Script47

use this：'insideItemClass [i] .style.display =“none”;'而不是'insideItemClass.style.display =“none”;' – Rakib

[如何通过类名获取子元素？]（https ：//stackoverflow.com/questions/12166753/how-to-get-child-element-by-class-name） – Script47

使用本：

itemClass[i].getElementsByClassName 
insideItemClass[i].style.display = "none";

代替

itemClass.getElementsByClassName 
insideItemClass.style.display = "none";

全码：

var itemClass = document.getElementsByClassName("www-components-menu-product-list--item_DgfZL"); 

for (i = 0; i < itemClass.length; i++) { 

     var insideItemClass = itemClass[i].getElementsByClassName("www-components-product-card--hybrid_2AD7v"); 

     if(insideItemClass.length > 0){ 
     itemClass.item(i).style.display = "none"; 
     } 
}

这里是小提琴：https://jsfiddle.net/jeL0fezh/8/

来源

2017-09-07 08:36:03 Rakib

这仍然只隐藏内部元素。不是整个项目。这里是链接点击黄色水稻按钮 [链接]（https://www.treaze.com/menubest.html） – Aaron

给我链接 – Rakib

我有更新的代码，你试过吗？仍然无法看到链接。 – Rakib

按类别选择具有特定子元素的元素使用javascript

回答

相关问题