1

私はJQueryに精通しておらず、これはここでは高度なもののように見えるため、最初から始めるコードはありません。クラスを追加したり、要素を非表示にしたりする方法は知っていますが、これは私にとって新しいことです。ここに問題があります。phpとmysqlを介してコンテンツが提供されています。コンテンツはすべて同じクラスを共有し、ページごとに5つ表示されます。一意のクラスを与えるために追加のクラスを追加するには、同じクラスをそれぞれ持つ必要があります。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>

htmlに対してこれを行うにはJqueryが必要です：

  <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タグのスクリプトを作成するのは実用的ではありません。1000個のIDがある場合、リストが長くなるにつれて、IDごとに1000回以上スクリプトを複製する必要があるためです。これはjavascriptの目的のためだけなので、javascript内に保持したいと思います。サーバー側でもこれを実現する方法がある場合は、それらの提案も取り上げます。この問題について助けてくれたすべての人に事前に感謝します。

4

3 に答える 3

3

今、私はあなたが何を望んでいるのかを最終的に理解しています

このコードが必要です

// 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で配列をループすると、サーバー側でこれを簡単に行うことができます;）

于 2012-09-28T09:17:41.233 に答える
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));
});

または、IDをまったく気にしない場合は、最短バージョンがEaterOfCorpsesの回答です。それぞれの方法には、独自の長所と短所があります。

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

涼しい。

于 2012-09-28T09:40:41.917 に答える
0 
$(document).ready(function(){
    jQuery.each($(".example"), function(){
        $(this).addClass("x" + this.id);
    });
});​
于 2012-09-28T08:41:56.693 に答える