Question

我的列表如下：

<ul id="portfolio-list">
   <li class="class1 class2">Content<li>
   <li class="class1 class2">Content<li>
   <li class="class3 class2 class1">Content<li>
   <li class="class3 class4">Content<li>
   <li class="class3 class4 class1">Content<li>
   <li class="class3 class4 class5">Content<li>
   <li class="class3 class4 class1">Content<li>
</ul>

现在我希望上面列表中每个类的显示最大帖子数为3.例如：class1从上到下出现5次。但我想只保留3.（从上到下）

我正在使用filter。当课程处于活动状态时，它看起来比我想要的帖子数量多。我怎么能用jQuery做到这一点？

Answer 1

如果你说每个班级你只想要拥有该班级的前三个元素，那么就这样做：

for (var i = 1; i <= 5; ++i)
    $("#portfolio-list li.class" + i).slice(3).remove();

既然你说类名是随机的，那么就把它们全部收集起来，并迭代列表。

var classes = $("#portfolio-list li[class]").map(function(el) {
    return el.className.split(/\s+/);
}).toArray();

classes = $.grep(classes, function(clss, i) {
    return clss && $.inArray(clss, classes) === i;
});

$.each(classes, function(i, clss) {
    $("#portfolio-list li." + clss).slice(3).remove();
});

我们可以这样做，而不是最后一次$.each()：

var before = "#portfolio-list li.",
    after = ":gt(2)";

$(before + classes.join(after + ", " + before) + after).remove();

如果课程为"foo"，"bar"，"baz"和"buz"，则生成的选择器将如下所示：

"#portfolio-list li.foo:gt(2), #portfolio-list li.bar:gt(2), #portfolio-list li.baz:gt(2), #portfolio-list li.buz:gt(2)"

虽然这样做可能更有效：

$("portfolio-list").find("li." + classes.join(":gt(2), li.") + ":gt(2)").remove();

或者这个：

$("portfolio-list").find("li")
                   .filter("." + classes.join(":gt(2), .") + ":gt(2)").remove();

或者这个：

$("portfolio-list").find("li." + classes.join(", li."))
                   .filter(":gt(2)").remove();

Answer 2

尝试.slice()

for (var i = 1; i <= 5; i++ )
{
    $('#"portfolio-list .class1').slice("3")
}

<小时/> OP评论

后更新

var cls_list = [];
$('#portfolio-list li').each(function () { //loop through each li item
    var cls = $.trim($(this).attr('class')).split(' '); //get list of classes in array using split with space
    for (var i = 0; i < cls.length; i++) { //loop through list of classes
        if (cls_list.indexOf(cls[i]) === -1 && $.trim(cls[i]) != '') { //check if not in array and not empty
            cls_list.push(cls[i]);//push to array 
            $('#portfolio-list li.' + cls[i]).slice("3"); //.remove() or .hide();
        }
    }
});

<小时/> 纠正你的HTML

<li class="class1 class2">Content</li> //close li tags
//                                ^

Fiddle Demo

如何显示帖子数量？

2 个答案: