如何将不同类添加到JQuery的同一类？(How to add a different class

I have no code to start off with, because I'm not advanced in JQuery and this seems like advanced stuff here. I know how to add classes, hide elements and other sorts of things but this is a new thing for me here. Here's the problem. I have content being served via php and mysql. The content will all share the same class and will be listed five per page. I need to have each of the same classes to have an extra class added to them to give it a unique class. An example of what the html looks like is below.

  <div id="1" class="example"></div>
  <div id="2" class="example"></div>
  <div id="3" class="example"></div>
  <div id="4" class="example"></div>
  <div id="5" class="example"></div>

I need Jquery to do this to the html:

  <div id="1" class="example ex1"></div>
  <div id="2" class="example ex2"></div>
  <div id="3" class="example ex3"></div>
  <div id="4" class="example ex4"></div>
  <div id="5" class="example ex5"></div>

It will not be practical to create scripts for the Id tag, because if I have a thousand Id's, then I will have to replicate the script a thousand times per id and more so as the list gets longer. This is only for javascript purposes so I want to keep it within javascript. If there is a way to accomplish this on the server side as well I'll take those suggestions as well. Thanks to all in advance for any help with this problem.

Answer 1:

现在我明白finnaly你想要什么

需要验证码

// Wait on the document to be loaded
$(function(){
    // get every element with the class example in an array and loop
    // through it(each) with i  as index
    $(".example").each(function(i){
        // add class ex with the index
        // this is the element we are pointing at so a div
        $(this).addClass("ex" + i);
    });
});​

但你可以在服务器端做到这一点很容易，当你遍历你的阵列5个格）

Answer 2:

如果我正确地读你的意见，你有5个项目每页和类将分别为EX1 EX2 ... EX5。

如果是这样，这里的脚本：

var itemsPerPage = 5;
$(".example").each(function(){       
    var number = this.id % itemsPerPage;
    if (number == 0) number = itemsPerPage;
    $(this).addClass("ex"+ number);
});

或短版本：

var itemsPerPage = 5;
$('.example').each(function(){
    $(this).addClass('ex'+ ((this.id % itemsPerPage) == 0 ? itemsPerPage : (this.id % itemsPerPage));
});

或最短的版本是EaterOfCorpses的答案，如果你不关心的ID都没有。 每种方法都有自己的优点和缺点。

实施例1：错误的ID顺序

<div id="6" class="example">
<div id="8" class="example">
<div id="7" class="example">

EaterOfCorpses的将产生

<div id="6" class="example ex0">
<div id="8" class="example ex1">
<div id="7" class="example ex2">

我的脚本将产生

<div id="6" class="example ex1">
<div id="8" class="example ex3">
<div id="7" class="example ex2">

实施例2：随机ID（EaterOfCorpses的优点）

<div id="15blahblah" class="example">
<div id="5" class="example">
<div id="10" class="example">

EaterOfCorpses的将产生

<div id="15blahblah" class="example ex0">
<div id="5" class="example ex1">
<div id="10" class="example ex2">

我的脚本将在15blahblah产生相同的类别和错误，这可能是既好（检测标识错误）和差（JS不会为特定记录运行）

<div id="15blahlbah" class="example exNil">  
<div id="5" class="example ex5">
<div id="10" class="example ex5">

凉。

Answer 3:

$(document).ready(function(){
    jQuery.each($(".example"), function(){
        $(this).addClass("x" + this.id);
    });
});​

文章来源: How to add a different class to the same class in JQuery?