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

最後の1つの意味からの注意、

最初から最初の空の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();

私の選択では、2番目が信頼できます。

// 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')

ただし、 textnodes:empty など、子ノードを持たない要素のみを選択するため、 

<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 に答える