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

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
}

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

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

2 个答案: