Question

我正在尝试从jQuery自动完成列表视图小部件中计算没有类.ui-screen-hidden的列表元素的数量（即可见元素）。我似乎无法做到正确。目前，此列表包含3个li元素，其中2个元素具有类.ui-screen-hidden。以下代码输出li个元素的总数（3）。有什么想法吗？

var elemsToSearch = $("#holderForListview ul li");
var i = 0;
$.each(elemsToSearch, function(index, elem) {
    if (!$(elem).hasClass("ui-screen-hidden")) {
        ++i;
    }
});
console.log(i); //3

我也尝试过以下但输出零：

console.log($("#holderForListview ul li:visible").length); //0

修改

以下是要过滤的示例原始HTML：

<div id="holderForListview" class="myDataHolder">
    <ul data-enhanced="true" data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-input="#name">
        <li data-filtertext="One 1"><a href="#">One</a></li>
        <li data-filtertext="Two 2"><a href="#">Two</a></li>
        <li data-filtertext="Three 3"><a href="#">Three</a></li>
    </ul>
</div>

以下是过滤的HTML：

<div id="holderForListview" class="myDataHolder">
    <ul data-enhanced="true" data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-input="#name">
        <li data-filtertext="One 1" class="ui-screen-hidden"><a href="#">One</a></li>
        <li data-filtertext="Two 2" class="ui-first-child ui-last-child"><a href="#">Two</a></li>
        <li data-filtertext="Three 3" class="ui-screen-hidden"><a href="#">Three</a></li>
    </ul>
</div>

奇怪的是，console.log($(elem));函数内$.each的输出输出3个数组，每个数组包含一个元素：

[<li data-filtertext="One 1" class="ui-screen-hidden"><a href="#">One</a></li>]
[<li data-filtertext="Two 2" class="ui-first-child ui-last-child"><a href="#">Two</a></li>]
[<li data-filtertext="Three 3" class="ui-screen-hidden"><a href="#">Three</a></li>]

......不确定这是否相关？

Answer 1

更简单的搜索变体是： console.log（$（“＃holderForListview ul li：not（.ui-screen-hidden）”）。length）

但你的变种也应该有效。所以，我想你的HTML代码有些麻烦

Answer 2

我查看了你的代码并为你创造了一个小提琴。它应该工作所以我认为唯一的问题是你忘了用文档准备包装你的jQuery代码......

$(document).ready(function(){
    console.log($("#holderForListview ul li:not(.ui-screen-hidden)").length);
})

JS Fiddle link

计算可见列表视图项的数量

2 个答案: