1

次の HTML を検討してください。

<div id=plan>
  <div id="plan-1" class='plan-hide'>One</div>
  <div id="plan-2" class='plan-hide'>Two</div>
  <div id="plan-3">Three</div>
  <div id="plan-4" class='plan-hide'>Four</div>
</div>

すべてのプラン (プラン 1、プラン 2、プラン 3、プラン 4) を非表示にしたい#plan

私は正規表現を使用[id^=plan-]しましたが、遅いと思います。

$("#slider").slider({
    range: "min",
    min: 0,
    max: 4
}, {
    slide: function( event, ui ) {
        $("[id^=plan-]").addClass('plan-hide');
        $("#plan-" + (ui.value+1)).removeClass('plan-hide');
    },
});

代替手段とは何ですか？

4

2 に答える 2

3

ui 値 + 1 に一致するものを除くコンテナー内のすべての要素にクラスを追加しようとしている場合は、すべての兄弟をターゲットにする方がおそらく高速です。

    slide: function( event, ui ) {
        $("#plan-" + (ui.value+1)).removeClass('plan-hide')
                                  .siblings().addClass('plan-hide');
    },

または単に：

    slide: function( event, ui ) {
        $('#plan').children('div').addClass('plan-hide');
        $("#plan-" + (ui.value+1)).removeClass('plan-hide');
    },

そしておそらく最速：

var elems = document.getElementById('plan').getElementsByTagName('div'),    
    len = elems.length;

$("#slider").slider({
    range: "min",
    min: 0,
    max: 4
}, {
    slide: function( event, ui ) {
        for (var i=0; i<len; i++) {
            elems[i].className = elems[i].id.indexOf(ui.value+1) != -1 ? '' : 'plan-hide';
        }
    },
});
​
于 2012-11-30T19:00:15.880 に答える
2

親 ID プランを使用して、一致する要素の範囲を短縮できます。

$('#plan [id^=plan-]').addClass('plan-hide');
于 2012-11-30T18:56:18.783 に答える