Question

我的网页上有一些分组<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组（数据组）并使用jQuery为其所有<li>标签添加名为'edge'的CSS类或使用nth添加CSS属性。

请帮我解决这个问题。

谢谢和问候

Answer 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');
});

Answer 2

类似于：

$('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项可能会很糟糕而且很慢，具体取决于列表中的数量。不是说我在这里有什么是最好的方法，但是如果你有数百个礼物，你的循环可能会慢慢运行。

选择某些元素组

2 个答案: