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

【问题标题】：How to select visible elements in a container?如何选择容器中的可见元素？
【发布时间】：2017-06-27 13:41:25
【问题描述】：

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

【问题讨论】：

$("li:visible")
@TricksfortheWeb 不起作用jsfiddle.net/wbramLm4
是的，:visible 仅适用于实际隐藏的元素，而不仅仅是屏幕外的元素。我会想办法解决的。
Using jQuery, how do you find only visible elements and leave hidden elements alone? 和 how to add class using jquery 可能重复 - 在其他两个问题之间，您应该可以找到您正在寻找的信息。
您可以查看此链接：stackoverflow.com/questions/123999/…。您的问题不是重复的，而是类似的问题。而不是“视口”，你应该检查你的容器 div。

标签： jquery html css

【解决方案1】：

您需要检查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
  })
})

【讨论】：

这是正确的方法，但检查元素是否适合整个视口，而不是溢出的父元素：隐藏；

【解决方案2】：

您可以将每个子矩形 (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 );

【讨论】：

你介意向 Natheesh 解释他为什么错了吗？因为我真的厌倦了他。
感谢 Pawel，它就像魔术一样工作。我找到了我要找的东西。非常感谢.. !!
@Asanka 很高兴我能帮上忙。现在建议将此答案标记为已接受，以便将来遇到类似问题的其他人可以找到它。

【解决方案3】：

我通过比较词组的总宽度和 class="wrapper" 的宽度来判断。我用 jQuery 编写这些代码。

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

【讨论】：