我在一个div中有两个无序的列表，它的类是已知的。我需要将第一个列表中的列表项更改为类为“time”的span。接下来，我想将第二个列表项更改为类为“frequency”的span。最后，我想删除<ul>标签，只在div中留下span。就像这样：
<div id="training-labels">
<ul>
<li>30 mins</li>
</ul>
<ul>
<li>Annually</li>
<li>First 2 weeks</li>
</ul>
</div>对此
<span class="time">30 mins</span>
<span class="frequency">Annually</span>
<span class="frequency">First 2 weeks</span>我已经设法将每个列表的内容更改为span：
$('#training-labels ul:nth-of-type(1) li').wrapInner('<span class="time" />').contents();
$('#training-labels ul:nth-of-type(2) li').wrapInner('<span class="frequency" />').contents();但还没有成功去除ul和li标记，只留下了span。
这是最好的方法吗？或者使用JQuery有更好的方法吗？
我已经设置了Fiddle here
第一个
4条答案
按热度按时间jvlzgdj91#
您可以执行以下操作：
第一个
JQuery
wrap()方法：wrap（）函数可以接受任何字符串或对象，这些字符串或对象可以传递给$（）工厂函数以指定DOM结构。
JQuery
unwrap()方法：从DOM中删除匹配元素集的父元素，将匹配元素保留在原来的位置。
注意：由于没有类附加到父div（id为
training-labels），因此两个范围位于同一行中。c8ib6hqw2#
如果我们能确定所有ul1都有时间，所有ul2都有频率
第一个
否则
第一个
jobtbby33#
您可以使用jQuery replaceWith（）函数来实现这一点：https://api.jquery.com/replacewith/
vc9ivgsu4#
我的方法
这与
unwrap解决方案没有什么不同，只是它与标签结构的联系不是那么紧密。clone部分不是严格要求的，但它意味着实际上只有一次对DOM的更新，这发生在整个替换生成之后。