jQuery: 使用 flex-wrap 实现余3补齐的列表布局

你可以使用 jQuery 来判断不满足余3并添加一个 '

' 元素的代码如下所示：

$(document).ready(function() {
  var $listItems = $('ul li');
  var numItems = $listItems.length;
  var remainder = numItems % 3;
  
  if (remainder !== 0) {
    var numToAdd = 3 - remainder;
    
    for (var i = 0; i < numToAdd; i++) {
      $('ul').append('<li>New Item</li>');
    }
  }
});

上面的代码首先获取 '

' 元素，并计算出 '
' 元素的数量以及余数。然后，如果余数不等于0，就计算出需要添加的新 '
' 元素的数量，并使用一个循环来添加这些新元素。

CSS 代码示例
```
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
```
注意：
- 代码中的 'New Item' 可以根据实际情况进行替换。
- 确保你的 <ul> 元素已经包含了一些 <li> 元素，否则代码将无法正常执行。
- 你可以使用其他方法来添加新的 <li> 元素，例如使用 .clone() 方法或手动创建新的 DOM 元素。
使用场景：

这种方法通常用于在使用 flex-wrap 布局时，确保每一行都包含相同数量的元素。例如，你可能想要在每行显示3张图片，而图片数量可能不是3的倍数，此时就可以使用这种方法来添加一些占位符图片以填补空白。