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

Answer 2

由于@thecodeparadox已经回答了你，这是一个有效的选择：

$('select:empty:first')

但:empty仅选择没有任何子节点的元素，包括 textnodes ，所以

<select> </select>
        ^------------------text node

或

<select> <--------- text node
</select>

不为空，:empty选择器不会抓住它们。

如果你有其中一个，你可以使用这个选择器：

// Select the first <select> that doesn't have an option as a child.
$('select:not(:has(option))').first()....

jQuery(':empty') docs

说明：选择所有没有子项的元素（包括文本节点）。

递归获取第一个空选择框

注意来自最后一个意味着，

2 个答案: