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>

同样，我有大约 20 个（其动态的）<li>标签组，它们使用“数据组”进行分类。每个类别都有不同数量的<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 回答