Как отобразить номер поста?

0

У меня есть список вроде:

<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. (сверху вниз)

Я использую фильтр. Когда класс активен, появляется больше, чем количество сообщений, которые я хочу. Как я могу сделать это с помощью jQuery?

Теги:

2 ответа

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();
Поделиться
  • 0
    Благодарю. но имя класса - это любое имя, а не по порядку. (только для примера)
  • 1
    @ user2728514: Если имя класса случайное, то сначала вам нужно собрать все классы для всех LI. Смотрите обновление.
Показать ещё 2 комментария
0

Попробуйте использовать .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

Поделиться
  • 0
    Благодарю. Я хочу для всего класса, а не только одного.
  • 0
    Благодарю. но имя класса - это любое имя (не по порядку, как в данном примере)
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню