使用jQuery为列表项包裹<a>标签并设置动态href的语法问题排查

问题根源 #

你的jQuery代码里，wrapInner('<a></a>')执行后返回的对象仍然是原<li>元素，所以后续链式调用的.attr("href", ...)会把属性加到<li>上，而非包裹内容的<a>标签。

修复方案 #

有两种简洁的修正方式：

方式一：先包裹再定位<a>标签添加属性

先完成内容包裹，再通过.find('a')找到内部的<a>元素，给它设置href：

$('.menu ul li').each(function(i, e){
  $(this).wrapInner('<a></a>').find('a').attr("href", "#slide-" + i);
});

方式二：包裹时直接构建带href的<a>标签

在wrapInner的参数里直接生成包含动态href的<a>标签，一步到位：

$('.menu ul li').each(function(i, e){
  $(this).wrapInner(`<a href="#slide-${i}"></a>`);
});

修正后输出 #

执行上述任一代码后，正确的HTML结构会是：

<li>
  <a href="#slide-0">Child 1</a>
</li>

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