javascript - 确定元素是否是最后一个可见元素

Question

我有一堆下拉菜单，我想知道确定刚刚更改的下拉菜单是否是列表中最后一个可见下拉菜单的最有效方法。现在这段代码只是检查刚刚更改的是否是最后一个而不是最后一个可见的。

<div id="dropdownArea">
   <div>
      <select id="select1"></select>
   </div>
   <div>
      <select id="select2"></select>
   </div>
   <div style="display: none;">
      <select id="select3"></select>
   </div>
   <div style="display: none;">
      <select id="select4"></select>
   </div>
</div>

target = 刚刚改变的select;

if($(target).parent().index() === $("#dropdownArea").children().length - 1){
   //do stuff
}

新代码:

var dddivs = $("#dropdownArea").children().filter(":visible");
if($(dddivs).index(target) === $("#dropdownArea").children().length - 1){
   //do stuff
}

那行得通吗？有没有更有效的方法？

Answer 1

您可以使用 .is测试 jQuery 对象的相等性。除此之外，我会附加 .last获取最后一个可见的选择并将选择器传递给 .children消除过滤器需求的方法:

var lastVisibleSelect = $("#dropdownArea").children(":visible").last();
if($(this).parent().is(lastVisibleSelect)){
   //do stuff
}