如何使用jQuery实现动态元素包裹列表项并添加类？

嗨，这问题我熟！想要给多个列表项各自包裹带类的动态元素，jQuery其实有专门的方法能搞定，比单个元素加类的场景要更直接～

核心方法：wrap() #

jQuery的wrap()方法就是专门用来给每个匹配到的元素单独包裹一个父元素的，完全符合你要处理多个列表项的需求。它会自动遍历所有选中的列表项，给每个都套上你指定的带类元素。

举个实际例子：
假设你现有列表的HTML是这样的：

<ul id="productList">
  <li>商品A</li>
  <li>商品B</li>
  <li>商品C</li>
</ul>

你可以用下面的代码给每个<li>包裹一个带item-container类的<div>：

// 选中所有列表项，用带类的div包裹每个项
$('#productList li').wrap('<div class="item-container"></div>');

执行后，HTML会变成：

<ul id="productList">
  <div class="item-container">
    <li>商品A</li>
  </div>
  <div class="item-container">
    <li>商品B</li>
  </div>
  <div class="item-container">
    <li>商品C</li>
  </div>
</ul>

进阶：动态创建包裹元素 #

如果需要给包裹元素添加更多属性（比如自定义data属性、事件绑定），可以先动态创建元素再用它来包裹：

// 先创建包裹元素并设置类和其他属性
var wrapper = $('<div>')
  .addClass('item-container')
  .attr('data-id', 'product-item');

// 用这个动态元素包裹所有列表项
$('#productList li').wrap(wrapper);

注意区分wrap()和wrapAll() #

别搞混这两个方法：

• wrap()：给每个元素单独套父元素（你需要的就是这个）
• wrapAll()：把所有选中元素一起套在同一个父元素里（比如把所有
• 包进一个大的
  ）

生成列表时直接包裹 #

如果你的列表项是动态生成的，也可以在生成阶段就直接完成包裹，不用事后再处理：

// 模拟要生成的列表数据
var productData = ['商品X', '商品Y', '商品Z'];
var list = $('#productList');

productData.forEach(function(name) {
  // 创建列表项
  var listItem = $('<li>').text(name);
  // 包裹后添加到列表（注意wrap返回的是原li，要取它的父元素）
  list.append(listItem.wrap('<div class="item-container"></div>').parent());
});

这样生成的列表项会直接带着包裹元素，一步到位～

内容的提问来源于stack exchange，提问作者JGallardo