append<li> 如果列表項計數 &lt; 3</li>

Question

我想將每三個 < li > 元素包裝在 div 中，我做到了。 現在我想計算那個包裹的 div 里面是否有少於 3 個 <li>，如果少於 3 個，那么 append <li> 這是我目前的代碼，我不知道為什么它不起作用：

var divs = $(".footer-events .event");
for(var i = 0; i < divs.length; i+=3) {
    divs.slice(i, i+3).wrapAll("<div class='item-wrapper'></div>");
}
if ( $('.footer-events .item-wrapper li').length < 3 ) {
    divs.append('<li class="event"></li>');
}

如果孩子的數量少於三個，我想要的只是添加 < li > 來填充剩余的空間。

Answer 1

看起來你想 append <li>到一些<div> ，這是無效的。

無論如何：這是您顯然需要的一個最小的可重現示例（只是普通的舊 js）。

[編輯] 一種遞歸和函數式的方法

 const uls = document.querySelectorAll("ul"); const createLi = () => Object.assign( document.createElement("li"), {className: "created"} ); uls.forEach( ul => { const thisUl = ul.querySelectorAll("li"); if (thisUl.length < 3) { let i = 3 - thisUl.length; while(i--) { ul.append(createLi()); } } });

 .created::before { content: 'hi, I am created'; }

 <ul> </ul> <ul> <li>item1</li> </ul> <ul> <li>item1</li> <li>item2</li> </ul> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul>

或者有點短/遞歸

 const stuffUntil = 4; const appendLi = (root, reFillIfNecessary) => { root.append(Object.assign(document.createElement("li"), {className: "created"})); reFillIfNecessary(); }; const stuffIt = (len, ul) => len >= stuffUntil? true: appendLi(ul, () => stuffIt(len + 1, ul)); const stuffUl = ul => stuffIt(ul.querySelectorAll("li").length, ul); document.querySelectorAll("ul").forEach(stuffUl);

 .created::before { content: "hi, I am just stuffing"; }

 <ul></ul> <ul> <li>item1</li> </ul> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul>