How to hide button element in Jquery depending the number of lists item in each unordered list-CodePudding

I want to hide/show the button from the below code depending the number list items (if ul has 6 or less li to hide button). In the example below I want to hide the button related to the first category since it has 4 list items. That would be dynamic so I want to check every ul.

I tried the code below and it hides all the buttons. Any help would be appreciated. Thank you in advance.

var $filterListMenu = $('ul.category-menu');
var filterListMenuSize = $filterListMenu.length;

$filterListMenu.each((i, el) => {
  let count = $(el).children('li').length;
  console.log('inner page length: '   count);

  if (count <= 6) {
    $(this).find('button').addClass('d-none');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="sidebar">
  <ul class="category-menu" id="category1">
    <li>First Ul li1 </li>
    <li>First Ul li2 </li>
    <li>First Ul li3 </li>
    <li>First Ul li4</li>

  </ul>
  <button class="btn" data-toggle="collapse" href="#category1" role="button" aria-expanded="false" aria-controls="category1">Click Here</button>

  <ul class="category-menu" id="category2">
    <li>Second Ul li1 </li>
    <li>Second Ul li2 </li>
    <li>Second Ul li3 </li>
    <li>Second Ul li4</li>
    <li>Second Ul li5</li>
    <li>Second Ul li6</li>
    <li>Second Ul li7</li>

  </ul>
  <button class="btn" data-toggle="collapse" href="#category2" role="button" aria-expanded="false" aria-controls="category2">Click Here</button>

</div>

CodePudding user response：

Like this

var $filterListMenu = $('ul.category-menu');
var filterListMenuSize = $filterListMenu.length;

$filterListMenu.each((i, el) => {
  let count = $(el).children('li').length;
  $(el).next('button').toggleClass('d-none', count <= 6);
});

.d-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="sidebar">
  <ul class="category-menu" id="category1">
    <li>First Ul li1 </li>
    <li>First Ul li2 </li>
    <li>First Ul li3 </li>
    <li>First Ul li4</li>

  </ul>
  <button class="btn" data-toggle="collapse" href="#category1" role="button" aria-expanded="false" aria-controls="category1">Click Here</button>

  <ul class="category-menu" id="category2">
    <li>Second Ul li1 </li>
    <li>Second Ul li2 </li>
    <li>Second Ul li3 </li>
    <li>Second Ul li4</li>
    <li>Second Ul li5</li>
    <li>Second Ul li6</li>
    <li>Second Ul li7</li>

  </ul>
  <button class="btn" data-toggle="collapse" href="#category2" role="button" aria-expanded="false" aria-controls="category2">Click Here</button>

</div>

var $buttons = $('.sidebar .btn').each(function() {
  $(this).toggleClass('d-none', 
    $(this).prev('.category-menu').find('li').length <= 6)
})

.d-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="sidebar">
  <ul class="category-menu" id="category1">
    <li>First Ul li1 </li>
    <li>First Ul li2 </li>
    <li>First Ul li3 </li>
    <li>First Ul li4</li>

  </ul>
  <button class="btn" data-toggle="collapse" href="#category1" role="button" aria-expanded="false" aria-controls="category1">Click Here</button>

  <ul class="category-menu" id="category2">
    <li>Second Ul li1 </li>
    <li>Second Ul li2 </li>
    <li>Second Ul li3 </li>
    <li>Second Ul li4</li>
    <li>Second Ul li5</li>
    <li>Second Ul li6</li>
    <li>Second Ul li7</li>

  </ul>
  <button class="btn" data-toggle="collapse" href="#category2" role="button" aria-expanded="false" aria-controls="category2">Click Here</button>

</div>

CodePudding user response：

One approach is as follows:

var $filterListMenu = $('ul.category-menu');
var filterListMenuSize = $filterListMenu.length;

$filterListMenu.each((i, el) => {
  let count = $(el).children('li').length,
      // caching a reference to the relevant <button>
      // to be shown or hidden:
      button = $(el).next('button.btn');

  // here we use square bracket notation to access
  // either the hide(), or show(), method of the
  // jQuery Object referring to the current element,
  // with the ternary/Conditional statement; if
  // the count is less than, or equal to, 6 then
  // we hide the element otherwise we show the <button>:
  button[ count <= 6 ? 'hide' : 'show' ]();
      
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="sidebar">
  <ul class="category-menu" id="category1">
    <li>First Ul li1 </li>
    <li>First Ul li2 </li>
    <li>First Ul li3 </li>
    <li>First Ul li4</li>
  </ul>
  <button class="btn" data-toggle="collapse" href="#category1" role="button" aria-expanded="false" aria-controls="category1">Click Here</button>

  <ul class="category-menu" id="category2">
    <li>Second Ul li1 </li>
    <li>Second Ul li2 </li>
    <li>Second Ul li3 </li>
    <li>Second Ul li4</li>
    <li>Second Ul li5</li>
    <li>Second Ul li6</li>
    <li>Second Ul li7</li>

  </ul>
  <button class="btn" data-toggle="collapse" href="#category2" role="button" aria-expanded="false" aria-controls="category2">Click Here</button>

</div>

References:

hide().
show().