javascript - jQuery - 如果少于三个则添加列表项元素

Question

所以我需要做的是确保每个无序列表中至少包含三个列表项元素。那么我如何遍历 ul 元素并确保其中至少有三个 li 子元素。

如果只有一里，我还需要多两里。如果有两个 li，我只需要再添加一个。

HTML:

<ul class="list">
  <li>...content</li>
</ul>

<ul class="list">
  <li>...content</li>
  <li>...content</li>
</ul>

<ul class="list">
  <li>...content</li>
  <li>...content</li>
  <li>...content</li>
  <li>...content</li>
</ul>

<ul class="list">
  <li>...content</li>
  <li>...content</li>
  <li>...content</li>
</ul>

我需要这样做的原因是信息是通过 WordPress 循环输入的，如果它没有循环至少三个内容元素，我需要添加更多空元素，直到它至少达到 3 个。

感谢您的帮助。

Answer 1

您可以定义一个变量来保存您希望每个 ul 包含的 li 的最大值，然后比较 li 的数量> 你在每个 ul 中都有它(max_lis 变量)来知道你要添加多少额外的 li ，最后循环并使用 append 将它们添加到当前 ul。

希望这对您有所帮助。

var max_lis = 3;

$('ul.list').each(function(){
  var lis_length = $('li',this).length;

  if( lis_length )
      additional_lis = max_lis - lis_length;
  else
      additional_lis = max_lis;
  
   for(i=0;i<additional_lis;i++)
      $(this).append('<li style="color:red;">... NEW content</li>');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list">
  <li>...content</li>
</ul>

<ul class="list">
  <li>...content</li>
  <li>...content</li>
</ul>

<ul class="list">
  <li>...content</li>
  <li>...content</li>
  <li>...content</li>
  <li>...content</li>
</ul>

<ul class="list">
  <li>...content</li>
  <li>...content</li>
  <li>...content</li>
</ul>