Question

我的目标是检测是否首先显示了我的元素；我想缩小到display: block;。

如果是，我想遍历文档中所有元素，以向它们添加类。元素是动态的；因此，我只需要添加一个公共选择器，以便在遇到第一个元素的display: none;时就可以隐藏它们（或display: block;）。

下面是我所拥有的；我主要是想知道如何检测元素是否在#banner下，如果需要，可以向它们添加一个公共选择器（类），以便随后隐藏（display:none;）

   function CheckIfExistThenHideBelow () {  
        var inElgbl =  document.getElementById('banner');
        if (typeof(inElgbl) != 'undefined' && inElgbl != null)
        { 
        // How to check if below element inElgbl in doc?

        var divsToHide = document.getElementsByClassName("below"); 

        for(var i = 0; i < divsToHide.length; i++){
        divsToHide[i].style.display = "none"; 
        }
    }

Answer 1

这比您想象的要简单。只需循环遍历紧随其后的目标元素的兄弟姐妹，然后通过应用类将其隐藏即可。

function removeSiblingsAfter(someElement){    

    // Check some element to see if it is currently being displayed as a block
    if(getComputedStyle(someElement).display === "block"){

       // Begin looping while there is a next sibling that is an element
       while(someElement.nextElementSibling){
         // Adjust the looping variable to be the next sibling
         // so that the loop can eventually end
         someElement = someElement.nextElementSibling; 
         
         someElement.classList.add("hidden");  // Hide each sibling
       }
    }
}

removeSiblingsAfter(document.getElementById("sampleTarget"));

.hidden { display:none; }

<div>Sibling Before<div>
<div id="sampleTarget">Target Element</div>
<div>Sibling After</div>
<div>
   <a href="http://example.com">Sibling After</a>
</div>
<div>Sibling After</div>

如果显示元素>隐藏其下方的所有元素（纯JS）

1 个答案: