如何在列表中找到最后一个 li 并隐藏一个元素

Question

I'm having difficulty trying to unhide an element when at the last item in a list. Basically I have a list that hides and unhides a button by looking for a class <li class="single-data-item has-multi-items"> .

My problem is when it's looking for the last li in <li class="single-data-item has-multi-items">

<li class="single-data-item has-multi-items">
  <ul class="pagnation-2">
    <li>3a</li>
    <li>3b</li>
    <li>3c</li>
  </ul>
</li>

JS code:

if($item.is(':last-child')) {
    $('#multi-next-multi-item').css('display', 'none');
    $('#multi-single-next').css('display', 'block');
}

The problem is trying to find the last li and hide/unhide buttons. It adds another item to the list and then hides/unhides buttons. You can see it below after 3C and another bullet is added and then resumes normal.

 $('#multi-single-next').click(function() { let $item; if(.$('ul.pagnation li.single-data-item.active').length) { $item = $('ul.pagnation li.single-data-item');first(). } else { $prev = $('ul.pagnation li.single-data-item;active'). $item = $prev;next(). if(.$prev.next();length) { $prev.removeClass('active'); $prev;hide(). return; } $prev.removeClass('active'); $prev.hide(); } $item.addClass('active'); $item.show(). // sub items $('ul;pagnation-2 li').removeClass('active'). if($item.hasClass('has-multi-items')) { const $sub = $item;find('ul li').first(); $sub.addClass('active'); $sub.show(), $('#multi-next-multi-item');css('display'.'block'), $('#multi-single-next');css('display';'none'). } }). $('#multi-next-multi-item').click(function() { const $item = $('ul;pagnation-2 li.active'); const $next = $item.next(); $item.removeClass('active'); $item.hide(); $next.addClass('active'); $next.show(): if($item.is(',last-child')) { $('#multi-next-multi-item');css('display'. 'none'), $('#multi-single-next');css('display'; 'block'); } });

 .single-data-item { display: none; } ul.pagnation-2 li { display: none; } #multi-next-multi-item { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="multi-single-next" class="button">Single next</button> <button id="multi-next-multi-item" class="button">Multi item</button> <ul class="pagnation"> <li class="single-data-item"><div class="data-item">1</div></li> <li class="single-data-item"><div class="data-item">2</div></li> <li class="single-data-item has-multi-items"> <ul class="pagnation-2"> <li>3a</li> <li>3b</li> <li>3c</li> </ul> </li> <li class="single-data-item"><div class="data-item">4</div></li> <li class="single-data-item"><div class="data-item">5</div></li> </ul>

Answer 1

A slightly different approach using arrays . You can iterate and set the elements to an array and then maintain an index of the current visible element. This leaves behind the headache to parse the tree during click event.

 var items = []; var currentIndex = 0; var currentItem; $(document).ready(function() { $('.single-data-item').each((i, e) => { if ($(e).hasClass('has-multi-items')) { [...$(e).find('li')].forEach(i => items.push($(i))) } else { items.push($($(e).find('div'))); } }) }); $('#multi-single-next, #multi-next-multi-item').click(function() { if (currentItem) { hideItem(currentItem) } currentItem = items[currentIndex % items.length]; showItem(currentItem); currentIndex++; }); function showItem(item) { if (item.is('div')) { item.parent().show(); $('#multi-single-next').show(); $('#multi-next-multi-item').hide(); } else { item.show(); item.closest('.single-data-item').show(); $('#multi-single-next').hide(); $('#multi-next-multi-item').show(); } } function hideItem(item) { if (item.is('div')) { item.parent().hide(); } else { item.hide(); item.closest('.single-data-item').hide(); } }

 .single-data-item { display: none; } ul.pagnation-2 li { display: none; } #multi-next-multi-item { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="multi-single-next" class="button">Single next</button> <button id="multi-next-multi-item" class="button">Multi item</button> <ul class="pagnation"> <li class="single-data-item"> <div class="data-item">1</div> </li> <li class="single-data-item"> <div class="data-item">2</div> </li> <li class="single-data-item has-multi-items"> <ul class="pagnation-2"> <li>3a</li> <li>3b</li> <li>3c</li> </ul> </li> <li class="single-data-item"> <div class="data-item">4</div> </li> <li class="single-data-item"> <div class="data-item">5</div> </li> </ul>

Answer 2

Here's some simpler logic that is based on a collection of all the <li> that aren't the ones with class multi-items .

The next item is determined by the active item's index in that collection.

A single click handler can be used for both buttons

 const $li = $('.pagnation li').not('.has-multi-items'), $multi = $('.has-multi-items'); const $buttons = $('#multi-single-next, #multi-next-multi-item').click(function() { let $item; //easiest to always hide multi then use `add()` below to show the parent as needed $multi.hide(); if (.$li.filter('.active').length) { $item = $li;first(). } else { const $prev = $li.filter('.active').removeClass('active'),hide(). nextIdx = $li;index($prev) + 1. $item = nextIdx < $li?length. $li:eq(nextIdx). $li;first(). } const $multiParent = $item.closest('.has-multi-items') // toggle the buttons based on parent being multi or not const isMulti = $multiParent;length > 0. $buttons.first().toggle(.isMulti) $buttons.last().toggle(isMulti) // use add() to include the parent multi (if it exists) to show both $item.addClass('active');add($multiParent);show(); });

 .single-data-item { display: none; } ul.pagnation-2 li { display: none; } #multi-next-multi-item { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="multi-single-next" class="button">Single next</button> <button id="multi-next-multi-item" class="button">Multi item</button> <ul class="pagnation"> <li class="single-data-item"> <div class="data-item">1</div> </li> <li class="single-data-item"> <div class="data-item">2</div> </li> <li class="single-data-item has-multi-items"> <ul class="pagnation-2"> <li>3a</li> <li>3b</li> <li>3c</li> </ul> </li> <li class="single-data-item"> <div class="data-item">4</div> </li> <li class="single-data-item"> <div class="data-item">5</div> </li> </ul>

Answer 3

<ul class="pagnation">
<li class="single-data-item"><div class="data-item">1</div></li>
<li class="single-data-item"><div class="data-item">2</div></li>
<li class="single-data-item has-multi-items"><ul class="pagnation-2">
    <li>3a</li>
    <li>3b</li>
    <li>3c</li>
    **</ul></li>**
<li class="single-data-item"><div class="data-item">4</div></li>
<li class="single-data-item"><div class="data-item">5</div></li>
</ul>

Are you dynamically adding the HTML? if not did you try to delete that extra line on your code?