如何根据每个无序列表中的列表项的数量在 Jquery 中隐藏按钮元素

Posted 2023-05-08

【中文标题】如何根据每个无序列表中的列表项的数量在 Jquery 中隐藏按钮元素

【英文标题】：How to hide button element in Jquery depending the number of lists item in each unordered list

【发布时间】：2021-11-04 06:22:05

【问题描述】：

我想根据数字列表项隐藏/显示下面代码中的按钮（如果 ul 有 6 或更少的 li 来隐藏按钮）。在下面的示例中，我想隐藏与第一个类别相关的按钮，因为它有 4 个列表项。那将是动态的，所以我想检查每个 ul。

我尝试了下面的代码，它隐藏了所有按钮。任何帮助，将不胜感激。提前谢谢你。

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>

【参考方案1】：

这样

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>

【参考方案2】：

一种方法如下：

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>

参考资料：

hide()。 show()。