如何使用jQuery按索引将图片移入对应li元素并调整DOM结构？

原始HTML结构 #

<!-- 图片容器 -->
<div class="images">
    <img src="image1.jpg" alt="" class="image1">
    <img src="image2.jpg" alt="" class="image2">
    <img src="image3.jpg" alt="" class="image3">
</div>

<!-- 列表容器 -->
<ul id="attnd" class="class-attnd">
    <li class="liclass">some text1</li>
    <li class="liclass">some text2</li>
    <li class="liclass">some text3</li>
</ul>

实现代码 #

// 获取目标元素集合
const $imgs = $('.images img');
const $lis = $('#attnd li');

// 遍历列表项完成所有转换操作
$lis.each(function(index) {
    // 为当前li添加带序号的类名
    $(this).addClass(`liclass-${index + 1}`);
    // 将li内文本包裹到带序号的span中
    $(this).contents().wrap(`<span class="spanclass-${index + 1}"></span>`);
    // 将对应索引的图片移入当前li的最前方
    $imgs.eq(index).prependTo(this);
});

// 可选：移除不再需要的图片容器
$('.images').remove();

代码说明 #

• 先获取所有图片和列表项的jQuery对象，方便后续批量操作。
• 遍历列表项时，利用index参数（从0开始计数）生成对应的序号类名，确保每个li和span的类名按顺序递增。
• contents().wrap()方法能精准选中li内的文本节点，避免遗漏或误包裹其他元素。
• prependTo()方法把对应图片插入到li内容的最前面，完全匹配目标结构要求。
• 最后可选择移除原图片容器，清理冗余DOM节点。

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