3

<select>このコードを使用してメニューをフィルタリングします。

jQuery.fn.filterByText = function(textbox) {
    return this.each(function() {
        var select = this;
        var options = [];
        $(select).find('option').not('option:first-child').each(function() {
            options.push({value: $(this).val(), text: $(this).text(), rel: $(this).attr('rel')});
        });
        $(select).data('options', options);

        $(textbox).bind('change keyup', function() {
            var options = $(select).empty().data('options');
            var search = $.trim($(this).val());
            var regex = new RegExp(search,"gi");

            $.each(options, function(i) {
                var option = options[i];
                if(option.text.match(regex) !== null) {
                    $(select).append(
                        $('<option>').text(option.text).val(option.value)
                    );
                }
            });
        });
    });
};

ご覧のとおり、私は最初のタグ.not('option:first-child')を除外するために使用します。<option>

このコードには2つの問題があり、正常に機能しますが、フィルタリングに属性を含める必要があり、テキストボックスをクリアしたときにrelを再度追加したいと思います。option:first-child

を配列に追加rel: $(this).attr('rel')しoptionsましたが、フィルタリングされた結果に戻す方法がわかりませんか？

元の値をすべて作成してそこvar original = [];にプッシュできますか？

4

2 に答える 2

1

フィルタリングにrel属性を含めるために、ほとんど仕事をしました。追加するだけ.attr('rel', option.rel)です：

$('<option>').text(option.text).val(option.value).attr('rel', option.rel)

最初のを再度追加する代わりに、optionそれを保持して、他のものを削除することができます。

$(select).children("option").not(":first").remove();

編集 （「データ」属性を取得する方法）：

あなたはこのようにすることができます（変数キャッシングを使用して改善可能）：

var options = $(select).data('options');
$(select).children("option").not(":first").remove();

またはこのように、連鎖性を維持するには：

var options = $(select).children("option:not(:first)").remove().end().data('options');

編集された回答

$(select).children("option").not(":first")
$(select).find('option').not('option:first-child')

子供VS検索：

.children（）メソッドは.find（）とは異なり、.children（）はDOMツリーを1レベル下に移動するだけですが、.find（）は複数のレベルを下に移動して、子孫要素（孫など）も選択できます。

options要素の直接の子であるため、children select（）を使用することをお勧めします。

：first VS：first-child

：first疑似クラスは：eq（0）と同等です。：lt（1）と書くこともできます。これは単一の要素にのみ一致しますが、：first-childは複数の要素に一致する可能性があります：親ごとに1つ。

親（私たちselect）は1人だけです。したがって、両方ともここで機能します。 ただし、次の点に注意してください。

：firstはjQuery拡張機能であり、CSS仕様の一部ではないため、：firstを使用するクエリでは、ネイティブDOM querySelectorAll（）メソッドによって提供されるパフォーマンスの向上を利用できません。：firstを使用して要素を選択するときに最高のパフォーマンスを実現するには、最初に純粋なCSSセレクターを使用して要素を選択し、次に.filter（ "：first"）（またはここでは.not（ "：first"））を使用します。

多くの場合、それはすべて状況/コンテキストに依存します。

于 2012-09-24T07:40:00.217 に答える
1

属性については、次のようにしてください。

attr('rel', option.rel)

$('select').data('option')それらを配列に格納するため、必要はありません。objectcachingを使用します。3 つの値を取得するために 3 回オプションをラップする必要はありません。

それがどのように見えるかのデモ: http://jsfiddle.net/BSDdZ/

于 2012-09-24T07:44:44.360 に答える