Question

我有一个带有ID的5个Div - ＃C1，＃C2，＃C3，＃C4和＃C5

有什么方法可以使用选择器一次性选择所有[连续] id？

我现在能做的就是：

 $('#C1,#C2,#C3,#C4,#C5').css({ SOME CSS });

ID是否按连续顺序时是否还有其他方法可供选择？

我想从1到5选择ID。

提前致谢..

Answer 1

最简单的解决方案是将class分配给<div>元素，并将其用作选择器：

<div id="C1" class="selectMe"> ... </div>
<div id="C2" class="selectMe"> ... </div>
<div id="C3" class="selectMe"> ... </div>

然后简单地说：

$('div.selectMe').css({ ... });

Answer 2

可以尝试

$("div[id^='C']").css({ SOME CSS });

'^'将表示以'C'开头的div ID，并为您的css选择它们

以上将选择所有id为'C'的div或者如果你只想选择5那么你可以试试

for(var i = 1 ; i < 6 ; i++) {
     $("#C"+i).css({SOME CSS});
}

Answer 3

使用那种选择器

$('[id^=C]').filter(function(i, v){
    return !isNaN(v.id[1]);
}).css({ SOME CSS })

Demo

Answer 4

我不确定你究竟想要完成什么但是看到你试图将CSS规则应用于那些元素我认为用ID来定位多个元素可能不是正确的事情。

如果您尝试定位多个元素，则应该使用类。这也适用于一种很好的工作方式，因为同类的元素通常已经共享CSS规则的类。

因此，您应该为元素添加一个类，然后更改：

$('#C1,#C2,#C3,#C4,#C5').css({ SOME CSS });

通过

$('.class').css({ SOME CSS });

如果你真的想要获取具有连续ID号的DOM元素，你可以这样做：

function getConsecutiveID(prefix){

    prefix = '#'+prefix;
    var stop = false;
    var selectors = [];
    var i = 1;
    while(!stop){
        if($(prefix+i).length>0){
            selectors.push(prefix+i);
        }else{
            stop =true;
        }
        i++;
    }
    return $(selectors.join(','));

}
getConsecutiveID('C').css({ SOME CSS });

Answer 5

如果您已在数组中包含数字，则可以使用Array.reduce执行此操作：

$all = [1, 2, 3, 4].reduce(function(jq, i) { return jq.add("#c" + i); }, $());

<强> See it in action

这在IE中本身不可用＆lt; 9但是MDN页面有一个可以使用的polyfill。

使用jquery选择器选择连续的Id - 有没有短手？

5 个答案: