替代正則表達式來隱藏匹配的id元素？

考慮這個HTML：替代正則表達式來隱藏匹配的id元素？

<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

（方案1，方案2，方案-3，計劃-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'); 
    }, 
});

什麼是替代方法？

來源

2012-11-30 I' ll-Be-Back

這不是一個真正的正則表達式，它是一個jQuery「開始與」選擇器，但它可能是在後臺使用正則表達式，它可能比僅僅選擇整個ID慢很多。在「幻燈片」回調中執行此操作將觸發每次增加滑塊時添加/刪除類，這使得它更慢。 – adeneo

如果你試圖將該類添加到所有元素在容器中除了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-30 19:00:15 adeneo

您可以使用父id計劃來縮短匹配元素的範圍。

$('#plan [id^=plan-]').addClass('plan-hide');

來源

2012-11-30 18:56:18 Adil

替代正則表達式來隱藏匹配的id元素？

回答

相關問題