如何選擇容器中的可見元素？

我有一個div.wrapper其中有一個ul的小短語li裏面。如何選擇容器中的可見元素？

該div有width:600px和height:20px與overflow:hidden。

我想只選擇div中的可見短語並向它們添加一個類。

如何做到這一點？

.wrapper { 
 
    background: #eee none repeat scroll 0 0; 
 
    border: 1px solid #ddd; 
 
    height: 20px; 
 
    overflow: hidden; 
 
    padding: 5px; 
 
    width: 600px; 
 
    float: left; 
 
} 
 
ul { 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul li { 
 
    float: left; 
 
    padding: 0 5px; 
 
    list-style-type: none; 
 
}

<div class="wrapper"> 
 
    <ul> 
 
    <li><a>Vocabulary Bowl.</a> 
 
    </li> 
 
    <li><a>Bowl.</a> 
 
    </li> 
 
    <li><a>Today's Leaders.</a> 
 
    </li> 
 
    <li><a>Weekly LeadersToday's.</a> 
 
    </li> 
 
    <li><a>Bowl.</a> 
 
    </li> 
 
    <li><a>Monthly Leaders.</a> 
 
    </li> 
 
    <li><a>Bowl.</a> 
 
    </li> 
 
    <li><a>Vocabulary Bowl Today's Leaders.</a> 
 
    </li> 
 
    <li><a>Bowl Leaders.</a> 
 
    </li> 
 
    <li><a>Today's Leaders Today's Leaders Today's Leaders.</a> 
 
    </li> 
 
    <li><a>Weekly Leaders.</a> 
 
    </li> 
 
    <li><a>Monthly.</a> 
 
    </li> 
 
    <li><a>Vocabulary Bowl.</a> 
 
    </li> 
 
    <li><a>Bowl Leaders.</a> 
 
    </li> 
 
    <li><a>Today's Leaders.</a> 
 
    </li> 
 
    <li><a>Weekly Leaders.</a> 
 
    </li> 
 
    <li><a>Monthly Leaders.</a> 
 
    </li> 
 
    <li><a>Vocabulary Bowl.</a> 
 
    </li> 
 
    <li><a>Bowl Leaders.</a> 
 
    </li> 
 
    <li><a>Today's Leaders.</a> 
 
    </li> 
 
    <li><a>Weekly Leaders.</a> 
 
    </li> 
 
    <li><a>Monthly Leaders.</a> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2017-02-09 Asanka

'$（「李：可見」）' – TricksfortheWeb

@TricksfortheWeb將無法正常工作https://jsfiddle.net/wbramLm4/ – pawel

是，'：visible'只適用於實際的隱藏要素，不剛剛離開屏幕。我會試圖找出一些東西。 – TricksfortheWeb

您可以比較每個子矩形（boundingClientRect）與包裝的矩形。

https://jsfiddle.net/wbramLm4/2/

var wrapper = document.querySelector('.wrapper'), 
    wrapperBox = wrapper.getBoundingClientRect(); 

    // the elements that are at least partially visible: top left corner fits in the wrapper 
    var inBoxPartial = $("li").filter(function(idx, li){ 
    var liBox = li.getBoundingClientRect(); 
    return liBox.top < wrapperBox.bottom && liBox.left < wrapperBox.right; 
    }); 

    // the elements that are completely visible: bottom right corner in the wrapper  
    var inBoxTotal = $("li").filter(function(idx, li){ 
    var liBox = li.getBoundingClientRect(); 
    return liBox.bottom < wrapperBox.bottom && liBox.right < wrapperBox.right; 
    }); 
    console.log(inBoxPartial, inBoxTotal);

來源

2017-02-09 14:13:07 pawel

你介意向Natheesh解釋爲什麼他錯了嗎？因爲我非常厭倦他。 – TricksfortheWeb

謝謝帕維爾，它的作品像魔術..我有我在找什麼..謝謝一堆..！ – Asanka

@Asanka很高興我能幫上忙。現在建議將此答案標記爲已接受，以便其他面臨類似問題的人可以在將來找到答案。 – pawel

您需要檢查是否有li中視可見。

function isElementInViewport(el) { 
    var rect = el.getBoundingClientRect(); 

    return rect.bottom > 0 && 
     rect.right > 0 && 
     rect.left < (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */ && 
     rect.top < (window.innerHeight || document.documentElement.clientHeight) /* or $(window).height() */; 
} 

$("li").forEach(li => { 
    if(isElementInViewport(li) { 
    //li is visible in the viewport 
    }) 
})

來源

2017-02-09 14:01:22

這是正確的方法，但檢查元素是否適合整個視口，而不是具有溢出的父元素：hidden; – pawel

我通過比較短語的總寬度和class =「包裝」的寬度判斷它。我用jQuery編寫這些代碼。

$(document).ready(function(){ 
    var len=0; 
    $("li").each(function(e){ 
     len+=$(this).width(); 
     if(len>$(".wrapper").width()) 
      $(this).addClass("hide"); 
    }) 
})

來源

2017-02-09 14:26:21

如何選擇容器中的可見元素？

回答

相關問題