Javascript 对列表中隐藏的下一行项目进行计数

我有一个包含内联列表项的列表。我可以看到大约8个，但是没有足够的空间来显示更多内容，其余的显示在下一行，隐藏（在容器的z索引后面），因为它的

溢出：隐藏

。如何使用JavaScript计算这些下一行项目

我知道jQuery有

$（'li:visible'）

，但我需要一种普通的JavaScript方式

我试图利用

getComputedStyle（el）

，但似乎没有任何方法来定位这些隐藏项

还有一个复杂的问题，但我认为它不能用于元素，只能用于文档可见性

---

这是一个列表项

针对您的情况，您需要确定LI的顶部是否在UL的“折叠”下。为此，我们可以使用

元素。getBoundingClientRect（）

：

现场演示：

---

注意：这不是一个通用的“元素隐藏”例程，它复杂而缓慢，而是一个针对OP属性的简单检查，导致“隐藏”…

对于您的情况，您需要识别LI的顶部是否在UL的“折叠”下。为此，我们可以使用

元素。getBoundingClientRect（）

：

现场演示：

---

注意：这不是一个通用的“is the element hidden”例程，它复杂而缓慢，而是一个针对OP属性的简单检查，导致“hiddennes”…

编辑：正如@dandavis所建议的，我的解决方案根本不是通用的（只适用于一行元素），所以只能在非常具体和简单的情况下使用！为了推广这种方法，您可以尝试检查元素的

offsetTop

是否大于容器的高度，或者

offsetLeft

是否大于宽度。无论如何，你最好还是使用他的解决方案

---

好的，取决于您需要它做什么，一个非常难看但有效的解决方案可能是检查元素是否具有与第一个元素不同的

offsetTop

，如下所示：

const children = [...document.querySelectorAll('#container li')]
const normalOffset = children[0].offsetTop
const overflownChildren = children.filter(li => li.offsetTop !== normalOffset)

---

编辑：正如@dandavis所建议的，我的解决方案根本不是通用的（只适用于一行元素），所以只能在非常具体和简单的情况下使用！为了推广这种方法，您可以尝试检查元素的

offsetTop

是否大于容器的高度，或者

offsetLeft

是否大于宽度。无论如何，你最好还是使用他的解决方案

---

好的，取决于您需要它做什么，一个非常难看但有效的解决方案可能是检查元素是否具有与第一个元素不同的

offsetTop

，如下所示：

const children = [...document.querySelectorAll('#container li')]
const normalOffset = children[0].offsetTop
const overflownChildren = children.filter(li => li.offsetTop !== normalOffset)

---

您需要以ul元素为目标，并将其保存到变量

var lists=document.getElementsByTagName（“ul”）然后用于循环，如下所示

<ul id="foo">
 <li>First</li>
 <li>Second</li>
 <li>Third</li>
</ul>


var lists = document.getElementsByTagName("ul");
for (var i = 0; i < lists.length; ++i) {
// filter so that only lists with the class "foo" are counted
 if (/(^|\\s)foo(\\s|$)/.test(lists[i].className)) {
    var items = lists[i].getElementsByTagName("li");
    for (var j = 0; j < items.length; ++j) {
        // do something with items[j]
    }
 }
}


首先
第二
第三

var list=document.getElementsByTagName（“ul”）；
对于（变量i=0；i
您需要以ul元素为目标，并将其保存到变量
var lists=document.getElementsByTagName（“ul”）然后用于循环，如下所示

<ul id="foo">
 <li>First</li>
 <li>Second</li>
 <li>Third</li>
</ul>


var lists = document.getElementsByTagName("ul");
for (var i = 0; i < lists.length; ++i) {
// filter so that only lists with the class "foo" are counted
 if (/(^|\\s)foo(\\s|$)/.test(lists[i].className)) {
    var items = lists[i].getElementsByTagName("li");
    for (var j = 0; j < items.length; ++j) {
        // do something with items[j]
    }
 }
}


首先
第二
第三

var list=document.getElementsByTagName（“ul”）；
对于（变量i=0；i
offsetTop的一个问题是填充和边框（当然取决于盒子型号）。此外，显示的代码仅确定“第一行”，而不是“是否隐藏”；如果显示的“图标”不止一行，这并不等同于……是的，您是对的，但如果只需要在一行中区分not overflown和overflown元素，那么这种差异就足够了。：）无论如何，您的解决方案似乎更好（我以前没有听说过
getBoundingClientRect
），所以我将对此进行投票，并在下次学习它！在一个完美的世界中，您的简单属性检查和我丑陋的函数调用一样有效。（不是吗；）
offsetTop
的一个问题是填充和边框（当然取决于盒子的型号）。此外，显示的代码仅确定“第一行”，而不是“是否隐藏”；如果显示的“图标”不止一行，这并不等同于……是的，您是对的，但如果只需要在一行中区分not overflown和overflown元素，那么这种差异就足够了。：）无论如何，您的解决方案似乎更好（我以前没有听说过
getBoundingClientRect
），所以我将对此进行投票，并在下次学习它！在一个完美的世界中，您的简单属性检查和我丑陋的函数调用一样有效。（不是吗；）旁白：
lists[i].classList.contains（“foo”）
在这些天无处不在。旁白：
lists[i].classList.contains（“foo”）
在这些天无处不在。