1

我的文档中有多个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，依此类推。

4

2 回答 2

3

试试这个：

$('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');
}

工作演示

于 2012-05-20T17:01:02.560 回答
3

正如@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') 文档

描述：选择所有没有子元素的元素（包括文本节点）。

于 2012-05-20T17:10:29.050 回答