在jQuery中查找第一个可见孩子的索引

Question

我有一个函数可以找到第一个可见孩子的索引。它的工作原理，但我想知道是否有一个更快/更好的方式来做到这一点：

var TheDiv = $('#' + TheDivID); 
var CurrentIndex = 0; 

TheDiv.children().each(function() { 
    if ($(this).is(':visible')) { 
     CurrentIndex = $(this).index(); 
     break; 
    } 
}); 

感谢您的建议。

Answer 1

如果TheDiv确实已经存在，加上在.children()方法的选择，并使用.index()来获取元素的索引：

TheDiv.children(':visible').index(); 

否则，使用：

CurrentIndex = $('#' + TheDivID + ' > :visible').index(); 

Answer 2

Rob W's answer好，并且可能是编写此代码的最短途径。但是，它不一定是最有效的。

jQuery的自定义选择器是慢。它们不是可以使用querySelectorAll的本机选择器的补丁。更重要的是，children(':visible')（或诸如此类）将测试每个元素的可见性，即使这不是您的应用程序所必需的。例如，如果你有300个孩子，第一个是可见的，你不需要测试下一个299，但是这个方法会这样做。

所以实际上你在你的问题中提出的方法可能不会离理想太远。这是行不通的，因为它是（break不在一个jQuery选择工作）和is是惊人慢，但我认为它可以清理...

TheDiv.children().each(function (i) { 
    if (jQuery.expr[':'].visible(this)) { 
     CurrentIndex = i; 
     return false; 
    } 
}); 

这使用return false打出来的each循环。它还使用jQuery的过滤器（以完全非正统和未记录的方式）来测试可见性。令人困惑的线路完全等同于$(this).is(':visible')，除此之外更为迅速。

因为一旦找到可见元素就会跳出循环，它可能比选择器串方法快。