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

考虑以下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');
    },
});

什么是替代方式？

最佳答案

如果您尝试将类添加到容器中除与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';
        }
    },
});
​

关于javascript - 正则表达式的替代方案来隐藏匹配的id元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13651286/