如何在JQuery中将不同的类添加到同一个类中？

我没有开始的代码，因为我在JQuery中并不先进，这看起来像是高级的东西。我知道如何添加类，隐藏元素和其他类型的东西，但这对我来说是一件新事物。这是问题。我有通过PHP和MySQL服务的内容。内容将全部共享相同的类别，并且每页将列出五个内容。我需要让每个相同的类都有一个额外的类添加到它们中，以赋予它一个独特的类。下面是一个html的例子。如何在JQuery中将不同的类添加到同一个类中？

<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>

我需要jQuery来做到这一点的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>

这是不实际的创建ID标签的脚本，因为如果我有一千个编号的，那么我将不得不每个ID复制脚本一千次以上，以便列表变得更长。这只是为了JavaScript的目的，所以我想保持它在JavaScript。如果有办法在服务器端实现这一点，我也会采取这些建议。感谢所有提前对这个问题的任何帮助。

来源

2012-09-28 Tony

但是为什么当它已经有一个id时需要额外的类？我的意思是这些课程更糟？ ID可以是1个项目我也使用了ID，但是有3000个项目，否则你总是可以使用自定义属性（不推荐） – EaterOfCode

你显然不太了解服务器端/数据库内容和unqueted id。如果你得到我的漂移，为一千个身份证复制脚本是不现实的。我没有不尊重地说这个。 – Tony

是的，但我不明白你的意思，因为添加一个id类是过度杀毒，而且类的速度要比Id慢得多，所以你可以解释一下自己吗？ – EaterOfCode

现在我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个格;）

来源

2012-09-28 09:17:41 EaterOfCode

我只是试过这个，并没有添加类。我不知道为什么，但没有错误。 – Tony

@Tony它的作品http://jsfiddle.net/gbwZZ/2/ – EaterOfCode

@Tony你包括jQuery？ – EaterOfCode

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

来源

2012-09-28 08:41:56

实际上，在我今天（在他们的网站上）的JQuery查询中，我有一种感觉，每个人都会扮演一个重要的角色，我正在努力完成。我会尝试你的脚本来看看这是如何解决的，并且会回来更新/评论我的结果。 – Tony

upvote应该有帮助 –

我刚刚意识到我不是100％确定你的脚本正在做什么，以便我可以正确地将它应用于我的设置。这对我和所有可能遇到过这种情况的人都会有很大的帮助和教育。预先感谢，但。 – Tony

如果我正确阅读你的评论，你每页有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">

很酷。

来源

2012-09-28 09:40:41 markbse

你的脚本似乎让我的JavaScript错误了。我也在尝试这两种方式。 – Tony

+1在我的答案和使用模数 – EaterOfCode

如何在JQuery中将不同的类添加到同一个类中？

回答

相关问题