javascript - 替代正则表达式来隐藏匹配的 id 元素？

Question

考虑这个 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>

我想在 #plan 中隐藏所有计划(plan-1、plan-2、plan-3、plan-4)

我使用了正则表达式 [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');
    },
});

什么是替代方式？

Answer 1

如果您尝试将类添加到容器中除与 ui 值 + 1 匹配的元素之外的所有元素，则定位所有 sibling 可能更快:

    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';
        }
    },
});
​