Question

所以我需要做的是确保每个无序列表中至少有三个list-item元素。那么如何循环遍历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

您可以定义一个变量，其中包含您希望每个li包含的ul的最大值，然后比较每个li中的ul个数量max_lis用li变量}来了解您要添加的额外ul的更多内容，最后使用{{循环并将其添加到当前append 1}}。

希望这有帮助。

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>

Answer 2

您可以使用从{ul。的当前数量for开始的li循环。

$('ul').each(function() {
  var i = $(this).find("li").length;
  for (i; i < 3; i++) $(this).append('<li>New item</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>

Answer 3

像这样？

＆＃13;

var lists = $('ul');
for(var i = 0; i < lists.length; i++) {
    var items = $('li', lists[i]);
    if(items.length < 3) {
        console.log(lists[i].id+ ' - add more list');
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list" id="list1">
  <li>...content</li>
</ul>

<ul class="list" id="list2">
  <li>...content</li>
  <li>...content</li>
</ul>

<ul class="list" id="list3">
  <li>...content</li>
  <li>...content</li>
  <li>...content</li>
  <li>...content</li>
</ul>

<ul class="list" id="list4">
  <li>...content</li>
  <li>...content</li>
  <li>...content</li>
</ul>

＆＃13;

Answer 4

您可以使用.filter()过滤ul元素少于3 li的元素，创建一个3减去.length的元素选定li，ul元素数组中的.append()子元素到ul。

$("ul")
.filter(function(i, el) {
  return $("li", this).length < 3
})
.each(function(i, el) {
  $(this).append(Array(3 - $("li", el).length).fill("<li>...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>

jQuery - 如果少于三个，则添加list-item元素

4 个答案: