1

<li>私のウェブページには、次のようにグループ化されたタグがいくつかあります。

<ul id="dg">
   <!-- group-1 -->
   <li data-group="one">....</li>
   <li data-group="one">....</li>
   <li data-group="one">....</li>
   <li data-group="one">....</li>

   <!-- group-2 -->
   <li data-group="two">....</li>
   <li data-group="two">....</li>

   <!-- group-3 -->
   <li data-group="three">....</li>

   <!-- group-4 -->
   <li data-group="four">....</li>
   <li data-group="four">....</li>
   <li data-group="four">....</li>
</ul>

<li>同様に、「data-group」を使用して分類されたタグの約20（動的）グループがあります。<li>タグの数が異なる各カテゴリ。

私がやりたいのは、4番目ごとのグループ（データグループ）を選択し、<li>jQueryを使用してすべてのタグに「edge」という名前のCSSクラスを追加するか、nthを使用してCSSプロパティを追加することです。

これを修正するのを手伝ってください。

よろしくお願いします

4

2 に答える 2

1

アップデート

単にセレクターを使用することはできません。すべてをループしてli、それらが必要なグループに属しているかどうかを推測する必要があります

var currentGroup = ""; //Name of the group currently checked 
var counter = 0; //Number of group found

//Loop through the items
$('#dg li').each(function(){
    //Check if we are checking a new group
    if(currentGroup != $(this).attr('data-group'))
    {
        //If yes, save the name of the new group
        currentGroup = $(this).attr('data-group');
        //And increment the number of group found
        counter++;
    }

    //If the number of the group is a multiple of 4, add the class you want
    if((counter % 4) == 0)
        $(this).addClass('edge');
});
于 2013-02-07T19:34:01.133 に答える
1

だから次のようなもの：

$('li[data-group="four"]').each(function(){
    $(this).addClass('edge');
});

それはあなたが意味することですか？

だからもっと好き：

function processItems(items){
    items.each(function(){
        $(this).addClass('edge');
    });
}
processItems($('li[data-group="four"]'));
processItems($('li[data-group="eight"]'));
processItems($('li[data-group="twelve"]'));

私はパフォーマンスの向上やこのようなことをしていることに気づいていませんがli、リスト内のアイテムの数によっては、すべてのアイテムをループするのは悪く、遅くなる可能性があります。私がここに持っているものを言うのは最善の方法ではありませんが、何百ものliアイテムがある場合、ループの実行が遅くなる可能性があります。

于 2013-02-07T19:34:27.553 に答える