确定元素是否是最后一个可见元素答案

【问题标题】：determine if element is last visibile element确定元素是否是最后一个可见元素
【发布时间】：2014-06-19 06:13:22
【问题描述】：

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

<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 = 刚刚改变的选择；

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
}

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

【问题讨论】：

标签： javascript jquery indexing

【解决方案1】：

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

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

【讨论】：

很好，从来不知道你可以将元素传递给is。
感谢您指出 .is() 的使用。我把“显示：无；”在错误的元素上。但我现在已经修好了。
你可以把.children(':visible')改成.find('select:visible')。
@BillCriswell 我认为.children 在这种情况下更合适。 .find('select:visible') 将查找所有子元素（包括选项和 optgroup）而不是直接子元素，然后向后查找它们的标记名。在提供的示例案例中，它们是等效的。
RGraham：明白。这个问题已经调整了几次哈哈。 Cypher：您可以使用上面 RGraham 的代码而不是 $(this).is(lastVisibleSelect) 来执行 $(this).parent().is(lastVisibleSelect) 并忽略我的第一条评论。

【解决方案2】：

你可以这样做：

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 的可能更好。

【讨论】：