如果较低的div包含特定文本，则将DIV隐藏在另一个div之上的几个级别上

Question

我正在使用一个网站来学习另一种口头语言。 我已经深入到网站的树（知识水平）中了，需要花一些时间才能向下滚动到页面的下一节。 我想隐藏已完成的div元素，仅查看未完成的项。 （Duolingo）

过去我可以在书签栏中单击一段JavaScript，它会自动执行此操作。 但这与网站的更新中断了。

我想创建自己的，只需要帮助弄清楚如何针对div进行定位即可。

我可以使用getElementsByClassName来查看页面上的div数组。

<div class="QmbDT">
    <a class="Af4up" href="javascript:;">
        <div class="_2albn">
            <div class="_2969E">
                <div class="_39IKr">
                    <div class="_3zkuO" style="height: 106px; width: 106px;">
                        <div class="_3o9cS"><svg height="106" width="106">
                                <g transform="translate(53, 53)">
                                    <path
                                        d="M3.245314017740486e-15,-53A53,53,0,1,1,-3.245314017740486e-15,53A53,53,0,1,1,3.245314017740486e-15,-53M-8.266365894244634e-15,-45A45,45,0,1,0,8.266365894244634e-15,45A45,45,0,1,0,-8.266365894244634e-15,-45Z"
                                        fill="#e5e5e5"></path>
                                    <path class="_1IdLW"
                                        d="M3.245314017740486e-15,-53A53,53,0,1,1,-3.245314017740486e-15,53A53,53,0,1,1,3.245314017740486e-15,-53M-8.266365894244634e-15,-45A45,45,0,1,0,8.266365894244634e-15,45A45,45,0,1,0,-8.266365894244634e-15,-45Z"
                                        fill="#ffd900"></path>
                                </g>
                            </svg>
                        </div>
                    </div>
                </div><span class="_1z_vo _3hKMG ewiWc"><span class="_1S0M4 _3KBC1 _780Gf _9l65a _3aw24 MrbBK"></span>
                    <div class="_26l3y"><img alt="crown" class="_2PyWM"
                            src="//d35aaqx5ub95lt.cloudfront.net/images/juicy-crown.svg">
                        <div class="qLLbC">5</div>
                    </div>
                </span>
            </div>
            <div class="_21B3_"><span class="_378Tf _3qO9M _33VdW">Family 4</span></div>
        </div>
    </a>
</div>

我正在尝试定位任何包含“ 5”然后“ display：none;”的.qLLbC。 在该部分顶部的div中，类为.QmbDT。

当我进入控制台并输入document.querySelectorAll('.qLLbC') ，我的节点列表document.querySelectorAll('.qLLbC') 159。 我需要如前所述获取祖先div，并隐藏qLLbC包含innerHTML为“ 5”的任何内容

Answer 1

您可以运行以下内容吗？ 只要QmbDT类是静态的，它就可以满足您的要求。

let parents = document.querySelectorAll('.QmbDT');

parents.forEach(i => {
   let val = parseInt(i.querySelector("div div span div div").innerText);
   if(val === 5) {
     i.style.display = 'none';
   }
})