Question

我正在尝试编写一个jQuery脚本，该脚本将添加一个类来列出特定ID范围内的项目。我在我的ID中使用数字，并希望调整ID的范围。

<li id="item-15">Something</li>
<li id="item-16">Something</li>
<li id="item-17">Something</li>
<li id="item-18">Something</li>
<li id="item-19">Something</li>

我想添加一个类来说明项目16到19.我该怎么做？

jQuery('li#item-[16-19]).addClass('the-class');

我不确定该怎么做。也许.each()？

Answer 1

var min = 16, max = 19;

$('li[id^=item-]').addClass(function ()
{
    var i = parseInt(this.id.replace('item-', ''), 10);
    if (i >= min && i <= max) return 'the-class';
});

为了具体，您应该使用共同的父级来限定选择器，例如

$('#some-ul-id > li[id^=item-]').addClass(...);

如果ID总是按顺序递增，并且零索引，则可以简化：

$('#some-ul-id > li[id^=item-]').addClass(function (i)
{
    if (i >= min && i <= max) return 'the-class';
});

或作为@matchew suggests使用.slice()：

$('#some-ul-id > li[id^=item-]').slice(min, max).addClass('the-class');

Answer 2

jQuery('li[id^="item-"]').filter(function() {
    var number = this.id.replace(/\D+/, '');
    return number >= 16 && number <= 19
}).addClass('the-class');

jsFiddle

Answer 3

这就是jquery .slice() 方法是为...设计的。

给出一个代表的jQuery对象一组DOM元素，.slice（） method构造一个新的jQuery对象来自匹配的子集元素。提供的开始索引确定其中一个的位置集合中的元素;如果结束了省略了这一个之后的所有元素将包含在结果中。

所以

jQuery('li').slice(17,21).addClass('the-class');
//note Zero Based indexing. Plus it wont include the last element.

直播示例： http://jsfiddle.net/VpNnJ/

您还可以将：gt（）和：lt（）选择器组合如下

$('li:gt(16):lt(19)').addClass('the-class');

再一个实例：http://jsfiddle.net/cLjXE/

Answer 4

（只是另一个答案）
转到自定义jQuery选择器。

在你的情况下它可能是：

$.expr[':'].customId = function(obj){
  var $this = $(obj);
  var id = $this.attr('id');
  var number = id.replace(/\D+/, '');
  if ((new RegExp(/^item-/).test(id)) && (number > 15 && number < 20)) {
    return true;
  }
  return false;
};

// Usage:
$('a:customId').addClass('the-class');

参考：
http://jquery-howto.blogspot.com/2009/06/custom-jquery-selectors.html
http://www.bennadel.com/blog/1457-How-To-Build-A-Custom-jQuery-Selector.htm

jQuery ID号范围

4 个答案: