如何在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中將不同的類添加到同一個類中？

回答

相關問題