提问者:小点点

如果列表项计数<3,则追加<li>


我想在div中包装每三个

  • 元素,我做到了。现在,我想计算一下包装的div中是否有少于3个
  • ,如果少于3,则追加
  • ,这是我到目前为止的代码,我不知道为什么它不起作用:

    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>');
    }
    

    我想要的只是添加

  • 来填充剩余的空间,如果孩子的数量少于三个。


  • 共1个答案

    匿名用户

    看来您要将

  • 追加到某些
    后,但这是无效的。

    总之:这里有一个你显然需要的最小的可复制示例(只是简单的旧js)。

    null

    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>