jQuery загружает первые 3 элемента для нескольких списков ul

Question

jQuery загружает первые 3 элемента для нескольких списков ul

0

Этот вопрос был задан давно и также ответил, что здесь jQuery загружает первые 3 элемента, нажмите "загрузить больше", чтобы отобразить следующие 5 элементов, но это было только для одного элемента ul.

Тем не менее, я хочу знать, как сделать то же самое для нескольких элементов, скажем, у меня есть это:

<ul id="myList"></ul>
<ul id="myList1"></ul>
<ul id="myList2"></ul>

как сделать javascript для нескольких элементов в этом случае?

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
         $('#showLess').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
        $('#loadMore').show();
         $('#showLess').show();
        if(x == 3){
            $('#showLess').hide();
        }
    });
});

любая идея, как это сделать??

благодаря

Обновление # 1:

Это моя другая часть кода для showmore и бесчувственный

<div id="loadMore">Load more</div><div id="showLess">show Less</div>

Обновление # 2

что, если классы, используемые вместо ids, облегчили бы это? как это:

    <ul class="myList"></ul>
    <ul class="myList"></ul>
    <ul class="myList"></ul>

и каждый showmore/Less может управлять одним из них. поэтому один к одному... это возможно???

Digital site 28 апр. 2014, в 08:54

Источник

1

а где ваши #loadMore и #showLess ?
Jai 28 апр. 2014, в 06:00
0

Хорошо, я добавлю это в основной пост. Спасибо за вопрос
Digital site 28 апр. 2014, в 06:02
1

Я полагаю, что каждый список имеет ссылку loadMore ?
Vereos 28 апр. 2014, в 07:38
0

Это верно, но я могу изменить это, если нужно, чтобы все заработало ...
Digital site 28 апр. 2014, в 08:06
1

У вас есть loadMore/showLess для каждого <ul> или один loadMore/showLess который контролирует все <ul> ?
Ian A 28 апр. 2014, в 09:07
0

У меня есть loadMore / showLess, который контролирует каждый <ul>. Я могу изменить все это, если код требует, чтобы я сделал это ... Я хочу, чтобы каждый loadMore / showLess делал свой собственный <ul>, но не один контролирует все ...
Digital site 28 апр. 2014, в 09:31

Показать ещё 4 комментария

Теги:

javascript

jquery

html

html-lists

show-hide

1 ответ

Ещё вопросы

Хорошо, я добавлю это в основной пост. Спасибо за вопрос
Я полагаю, что каждый список имеет ссылку loadMore ?
Это верно, но я могу изменить это, если нужно, чтобы все заработало ...
У вас есть loadMore/showLess для каждого <ul> или один loadMore/showLess который контролирует все <ul> ?
У меня есть loadMore / showLess, который контролирует каждый <ul>. Я могу изменить все это, если код требует, чтобы я сделал это ... Я хочу, чтобы каждый loadMore / showLess делал свой собственный <ul>, но не один контролирует все ...

Irvin Dominin · Accepted Answer · 2014-04-28T08-22-00.000Z

Вы можете изменить свой код, используя классы вместо ids и wrapping div; чем соответственно изменить логику с помощью вложенности элементов.

Вместо использования переменной вы можете использовать атрибут HTML для хранения текущего количества отображаемых li для каждой ul.

Код:

$(document).ready(function () {

    $(".wrapper").each(function (index) {
        $(this).find('.myList li:lt(' + $(this).attr('viewChild') + ')').show();
    });   

    $('.loadMore').click(function () {
        var $myWrapper= $(this).closest('.wrapper');
        var x= parseInt($myWrapper.attr('viewChild'),10);
        var liSize=$myWrapper.find('.myList li').size();        
        x = (x + 5 <= liSize) ? x + 5 : liSize;
        $myWrapper.attr('viewChild',x)
        $myWrapper.find('.myList li:lt(' + x + ')').show();
        $myWrapper.find('.showLess').show();
        if (x == liSize) {
            $myWrapper.find('.loadMore').hide();
        }
    });

    $('.showLess').click(function () {
        var $myWrapper= $(this).closest('.wrapper');
        var x= $myWrapper.attr('viewChild')
        x = (x - 5 < 0) ? 3 : x - 5;
        $myWrapper.attr('viewChild',x)
        $myWrapper.find('.myList li').not(':lt(' + x + ')').hide();
        $myWrapper.find('.loadMore').show();
        $myWrapper.find('.showLess').show();
        if (x == 3) {
            $myWrapper.find('.showLess').hide();
        }
    });
});

Демо: http://jsfiddle.net/9gxBT/

Большое спасибо @ Ирвин Доминин ака Эдвард. ты взорвал мой разум этим огромным усилием. Слова благодарности недостаточно за ту огромную помощь, которую вы оказали. Желаю тебе всего самого наилучшего!
@Digitalsite, пожалуйста, и спасибо за хорошие слова!