如何选择容器中的可见元素？

我有一个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

如何选择容器中的可见元素？

回答

相关问题