2011-07-16 23 views
0

各リスト(#list)の項目を対応するもののクラスにArrayに変更したいと思います。私はこのようなものですリストがあります:リスト要素のクラスを変更する

<ul id="list"> 
    <li>Banana</li> 
    <li>Apple</li> 
    <li>Pear</li> 
    <li>Strawberry</li> 
    <li>Lemon</li> 
</ul> 

をそして私はこの配列を持っている:

["ban", "appl", "per", "straw", "lemn"] 

私が欲しいのは、彼らがそうであるようにjQuery.addClass()機能が順番にclassで各項目を変更するということですArrayにあります。その結果:

<ul id="list"> 
    <li class="ban">Banana</li> 
    <li class="appl">Apple</li> 
    <li class="per">Pear</li> 
    <li class="straw">Strawberry</li> 
    <li class="lemn">Lemon</li> 
</ul> 

どうすればいいですか?

答えて

4

あなたのためにこのshould work

var classes = ["ban", "appl", "per", "straw", "lemn"]; 

$('#list > li').addClass(function(index) { 
    return classes[index]; 
}); 

あなたはこの過負荷on the jQuery websitefunction(index, currentClass)コールバックを取り1)のマニュアルを参照してくださいすることができます。

+0

これは、ネストされたリストのために動作しません。 –

+2

OPに配列の各インデックスの特定のクラスがあるとすれば、ネストされたリストを気にするのは疑わしいです。とにかく修正されましたが(ありがとう)! –

+0

コードが表示されているので、 '.find()'はうまく動作します。あなたはいつも '.children()'を代わりに使うことができます。 – user113716

2
$('#list > li').each(function(i){ 
    $(this).addClass(myArray[i]); 
}); 
2
var myArray = ["ban", "appl", "per", "straw", "lemn"]; 
$("#list > li").each(function(index) { 
    $(this).addClass(myArray[index]); 
}); 
1
$.each(myArray, function(i, value){ 
     $('#list li').eq(i).addClass(value); 
    } 
); 
+0

'.get()'がjQueryオブジェクトではなくDOM要素を返すため、これは機能しません。また、同じセレクタをループ内で再実行することはお勧めできません。 – user113716

+0

おかげで編集しましたが、私はダン・タオの方が良いと思います。 – Paulpro

関連する問題