Question

我没有代码可以开始，因为我没有使用JQuery，这看起来像是先进的东西。我知道如何添加类，隐藏元素和其他类型的东西，但这对我来说是一件新事。这是问题所在。我通过php和mysql提供内容。内容将共享同一个类，每页将列出五个。我需要让每个相同的类都添加一个额外的类来为它提供一个独特的类。下面是html的示例。

  <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，那么我将不得不每个id复制脚本一千次以上，以便列表变得更长。这仅用于javascript目的，因此我想将其保留在javascript中。如果有一种方法可以在服务器端实现这一点，我也将采取这些建议。感谢所有人提前帮助解决这个问题。

Answer 1

现在我终于明白了你想要的东西

需要此代码

// 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个div循环遍历数组时，您可以在服务器端轻松完成此操作;）

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生成相同的类和错误，这可能是好的（检测ID中的错误）和坏（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);
    });
});

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

3 个答案: