javascript - 递归获取第一个空选择框

Question

我的文档中有多个 select 框，其中一些是随页面加载而加载的，一些是动态创建的。例如:

<select>
    <option>select one</option>
</select>

<select></select>

<select>
    <option>select two</option>
</select>

<select>
    <option>select three</option>
</select>

<select>
</select>

更多是动态创建的，有些是空的。

我想在页面加载时获得第一个空的 select 并再次单击按钮想要获得第一个空的 select 框 从我得到的最后一个开始并继续这个直到不再存在这样的select框。

注意从最后一个意思,

如果我得到第一个空的 select 框，然后一个 button 单击搜索将从那个 select 框开始并继续直到再次得到一个空的 select 等等。

Answer 1

试试这个:

$('select:empty:first');

但是要注意，上面的选择器只有在你的select框是这样的时候才有效

<select></select> // even without any newline

因为 :empty 没有子元素的点元素，不是带有换行符或文本节点的事件。

因此，如果您的 select 看起来像:

<select>
</select>

上面的选择器会失败。要让 select 喜欢这两种类型，您可以使用

$('select').filter(function() {
  return !this.innerHTML.replace(/\s/g,'').length;
}).first();

或如@gdoron 所述

$('select').filter(function() {
  return !$.trim(this.innerHTML);
}).first();

在我看来，第二个是可靠的。

// solution to your recursive search

$('select')
    .filter(function() { // filtering for empty select
        return !this.innerHTML.replace(/\s/g,'').length;
     })
    .first() // taking the first
    .addClass('lastIndentified'); // adding a class to keep track

$('button#search').on('click', function() {
  // reference for last empty select
  var lastIndentified = $('select.lastIndentified');

  lastIndentified
      .nextAll('select') // searching for all select
      .filter(function() { // making filtering
           return !this.innerHTML.replace(/\s/g,'').length;
      })
      .first() // taking first one from lastIndetified
      .addClass('lastIndentified');
    lastIndentified.removeClass('lastIndentified'); // remove class from last empty select and pass it to new empty select

    // for example
    // calling function to process with last empty select
    processWithLastEmptySelect($('select.lastIndentified'));
});

function processWithLastEmptySelect(lastSelect) {
   // your code if needed
   lastSelect.css('border', '1px solid green');
}

Working Demo