Javascript 确定元素是否是最后可见的元素

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

<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>

新代码：

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

这样行吗？有没有更有效的方法？

可以用来测试jQuery对象的相等性。除此之外，我将附加以获取最后一个可见的select并将选择器传递给该方法，以消除对过滤器的需要：

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

您可以这样做：

var $selects = $('select');

$selects.on('change', function () {
  var $select = $(this);
  var startIndex = $selects.index($select);
  var visibleNextSiblingsLength = $selects.slice(startIndex + 1).filter(':visible').length;
  if (visibleNextSiblingsLength === 0) {
    console.log('You just changed the last visible select');
  }
});

---

虽然RGraham的可能更好。

Nice，但我不知道可以将元素传递给

is

。感谢您指出.is（）的用法。我将“display:none；”放在了错误的元素上。但我现在已经修复了。您可以将

.children（':visible'）

更改为

.find（'select:visible'）

@BillCriswell。我认为

.children

在这种情况下更合适

.find（'select:visible'）

将查找所有子元素（包括option和optgroup），而不是直接查找子元素，然后向后查找它们的标记名。在提供的示例案例中，它们是等效的。RGraham：理解。这个问题已经调整了好几次了哈哈。Cypher：您可以使用上面的RGraham代码来执行

$（this）.parent（）.is（lastVisibleSelect）

，而不是

$（this）.is（lastVisibleSelect）

，只需忽略我的第一条注释。

var $selects = $('select');

$selects.on('change', function () {
  var $select = $(this);
  var startIndex = $selects.index($select);
  var visibleNextSiblingsLength = $selects.slice(startIndex + 1).filter(':visible').length;
  if (visibleNextSiblingsLength === 0) {
    console.log('You just changed the last visible select');
  }
});