如果較低的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';
   }
})