Javascript 如何在列表中添加元素以填充内容，从而实现元素数相等的列表？

我有许多不同项目的列表：

<div id="listsContainer">
    <ul>
        <li>lorem lipsum</li>
        <li>lorem lipsum</li>
    </ul>
    <ul>
        <li>lorem lipsum</li>
        <li>lorem lipsum</li>
        <li>lorem lipsum</li>
    </ul>
    <ul>
        <li>lorem lipsum</li>
        <li>lorem lipsum</li>
        <li>lorem lipsum</li>
        <li>lorem lipsum</li>
    </ul>
</div>

利普苏姆酒店
利普苏姆酒店


利普苏姆酒店
利普苏姆酒店
利普苏姆酒店


利普苏姆酒店
利普苏姆酒店
利普苏姆酒店
利普苏姆酒店

有包含2个元素的列表和包含3个元素的其他列表等。
我想将空元素添加到包含的元素少于包含许多元素的列表中，以使列表具有相同数量的元素

我试过了，但效果很好：

$("ul").each(function() {
    $( this ).find("li").addClass("total-elements"+ $(this).children().length );
    if($(this).children().length == 3) {
        $(this).append( "<li></li>" );
    }
    if($(this).children().length == 2) {
        $(this).append( "<li></li><li></li>" );
    }
});

$（“ul”）。每个（函数（）{
$（this.find（“li”）.addClass（“元素总数”+$（this.children（）.length）；
if（$（this.children（）.length==3）{
$（此）。追加（“
”）；
}
if（$（this.children（）.length==2）{
$（此）。追加（“
”）；
}
});

问题是，我不知道列表中有多少项包含许多项（并不总是4项）

---

有没有办法动态检查哪个列表包含比其他列表更多的元素，并将元素添加到其他列表中，以获得元素数量相等的列表？

您必须先检查最大长度，请检查此项

var max=0；
$（“ul”）。每个（函数（）{
if（$（this）.children（'li'）.length>max）
max=$（this）.children（'li'）.length；
});
$（“ul”）。每个（函数（）{
if（$（this）.children（'li'）。长度<最大值）{
for（var i=$（this）.children（'li'）.length；i”）；
}
});


利普苏姆酒店
利普苏姆酒店


利普苏姆酒店
利普苏姆酒店
利普苏姆酒店


利普苏姆酒店
利普苏姆酒店
利普苏姆酒店
利普苏姆酒店

我建议创建一个简单的插件，如下所示：

// creating a simple plug-in:
(function($) {
  $.fn.listEqualize = function(opts) {
    // in the plug-in, in this scope, 'this' is the jQuery collection.
    // we're getting an array of the number of children in each
    // element returned by the selector:
    var childCount = this.map(function() {
        // 'this' is a DOM node, over which map is iterating,
        // returning the number of element-children:
        return this.children.length;
      // converting to an array of values:
      }).get(),
      // finding the largest value in the array, using Array.prototype.reduce:
      largestCount = childCount.reduce(function(a, b) {
        // whichever of the two numbers (the previous or current),
        // we keep it:
        return a > b ? a : b;
      }),
      // initialising a variable for later use:
      delta,
      // creating an <li> element:
      li = document.createElement('li');

    return this.each(function() {
      // finding the difference between the number of children
      // of this element, and the largest number of children:
      delta = largestCount - this.children.length;

      for (var i = 0; i < delta; i++) {
        // appending a as many cloned <li> elements as needed
        // to equalize the <ul> elements:
        this.appendChild(li.cloneNode());
      }
    });
  };
})(jQuery);


$('ul').listEqualize();



利普苏姆酒店
利普苏姆酒店


利普苏姆酒店
利普苏姆酒店
利普苏姆酒店


利普苏姆酒店
利普苏姆酒店
利普苏姆酒店
利普苏姆酒店

试试看

var elem=$（“#列表容器ul”）；
各要素（功能（i，el）{
var j=数学最大应用（$，
$.map（元素，函数（v，k）{
返回$（“>li”，v）.长度
}));
而（$（“>li”，el）.长度”）。附录（el）
}
})

看


var elem=$（“#列表容器ul”）；
各要素（功能（i，el）{
var j=数学最大应用（$，
$.map（元素，函数（v，k）{
返回$（“>li”，v）.长度
}));
而（$（“>li”，el）.长度”）。附录（el）
}
})


利普苏姆酒店
利普苏姆酒店


利普苏姆酒店
利普苏姆酒店
利普苏姆酒店


利普苏姆酒店
利普苏姆酒店
利普苏姆酒店
利普苏姆酒店


var elem = $("#listsContainer ul");
elem.each(function (i, el) {
    var j = Math.max.apply($,
      $.map(elem, function (v, k) {
        return $("> li", v).length
      }));
    while ($("> li", el).length < j) {
        $("<li>").appendTo(el)
    }
})