使用 jquery 选择器选择连续的 ID - 是不是有任何简写？

Posted 2023-03-05

【中文标题】使用 jquery 选择器选择连续的 ID - 是不是有任何简写？

【英文标题】：selecting consecutive Id's using jquery selector - is there any short hand?使用 jquery 选择器选择连续的 ID - 是否有任何简写？

【发布时间】：2013-06-03 12:04:16

【问题描述】：

我有 5 个带有 ID 的 Div - #C1、#C2、#C3、#C4 和 #C5

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

我现在能做的就是：

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

当ID的顺序是连续的时，还有其他方法可以选择吗？

我想从 1 到 5 中选择 ID。

提前谢谢..

【问题讨论】：

如果我正确理解了您的问题，那么您做对了。 $('#C1,#C2,#C3,#C4,#C5') 是一个有效的选择器。

是的..但是还有其他方法吗？像 $('#C[1ton]'); 这样的东西这工作得很好，但想知道这有什么短手吗？

@Salketer ：感谢您的回答，但有任何简写吗？像 $('#C[1 to n]') ??

为什么你还需要这样做？给他们上课！

@Salketer：哇哦！！我从来没有想到过。谢谢......将使用它来代替。

【参考方案1】：

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

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

那么简单：

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

【参考方案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);

【讨论】：

这可能不是一个很好的解决方案，因为可能有很多元素的id 以C 开头

还将标记#content 以仅命名一个流行ID

也考虑我的第二个回答

【参考方案3】：

使用那种选择器

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

Demo

【讨论】：

"当 ID 连续排列时"...这将选择 ID 以 "C" 开头的 任何 元素。

这无济于事，因为像“container”这样的任何 id 也会受到影响。

值得注意的是，这种选择器的执行速度会（可能相当）慢。如果他们只是想节省打字时间，那么这可能不值得。

【参考方案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 );

【讨论】：

我现在使用这个类...但是很想知道它是否有任何短手..

编辑添加了一个能够无限制地抓取连续 ID 的功能。

【参考方案5】：

如果您已经有数组中的数字，您可以使用Array.reduce：

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

See it in action.

这在 IE