如果id使用jquery以偶数结尾,则将类应用于具有特定id的每个div

时间:2010-11-09 11:52:31

标签: javascript jquery

如果id以偶数结尾,我想将一个类应用于具有特定id的每个div。此外,我想将一个不同的类应用于以奇数结尾的类。理想情况下,如果可以通过jquery实现这一点,那就太棒了。

这是一个例子。我想在id为“item1”的所有div中添加“Red”类,其中最终的数字是奇数。所以“红色”类将应用于item1,item3,item5。

同样地,我想为所有具有id“item2”的div添加“Green”类,其中最终的数字是偶数。因此,类“绿色”将应用于item2,item4,item6。

谢谢,非常感谢任何帮助!

4 个答案:

答案 0 :(得分:4)

如果你满足先决条件,史蒂夫的回答看起来很干净。

如果没有,你可以循环使用它们:

$('div').each(function(d) {
  num = Number( /\d+$/.exec( d.attr('id') )[0] );
  if (isNaN(num)) return;
  d.addClass(num % 2 == 0 ? 'even' : 'odd');
});

或更多jQuery-sh:

$('div')
  .filter(function(d) { return /[02468]$/.test( d.attr('id') ); })
  .addClass('even');
$('div')
  .filter(function(d) { return /[13579]$/.test( d.attr('id') ); })
  .addClass('odd');

答案 1 :(得分:0)

您可以使用jquery正则表达式 - 请参阅this question

答案 2 :(得分:0)

function doStuff(baseId, evenClassName, oddClassName) {
    $('[id^=' + baseId + ']').each(function() {
        var $this = $(this);
        var number = $this.attr('id').replace(baseId, "");
        $this.addClass(number % 2 == 0 ? evenClassName : oddClassName);
    });
}

$(document).ready(function() {
    doStuff("item", "Green", "Red");
});

注意:未经测试

史蒂夫在评论中指出你可以使用:奇数和:甚至是jQuery选择器,但如果是这样,那么为什么不使用CSS:nth-​​child伪选择器:

<div id="mystuff">
    <div id="item1" class="item"></div>
    <div id="item2" class="item"></div>
    <div id="item3" class="item"></div>
</div>

#mystuff .item {
    /* your default and odd styles here */
}
#mystuff .item:nth-child(2n+1) {
    /* your even styles here */
}

答案 3 :(得分:0)

$('[id^=id-start-][id$=0],'
+ '[id^=id-start-][id$=2],'
+ '[id^=id-start-][id$=4],'
+ '[id^=id-start-][id$=6],'
+ '[id^=id-start-][id$=8]').addClass('myClass');