我想在DOM中移动HTML标签(在本例中为Icon)。
我的HTML标记如下:
<li class="linklist__item">
<i class="fa fa-angle-right"></i>
<a href="#" class="link linklist__link teasable__open" title="[Link title]">Lorem</a>
</li>
<li class="linklist__item">
<i class="fa fa-angle-right"></i>
<a href="#" class="link linklist__link teasable__open" title="[Link title]">Lorem</a>
</li>
应该看起来像这样:
<li class="linklist__item">
<a href="#" class="link linklist__link teasable__open" title="[Link title]"><i class="fa fa-angle-right"></i>Lorem</a>
</li>
<li class="linklist__item">
<a href="#" class="link linklist__link teasable__open" title="[Link title]"><i class="fa fa-angle-right"></i>Lorem</a>
</li>
和我的JS这样:
const linklistItem = this.$('.linklist__item');
const linklistLink = this.$('.linklist__item .linklist__link');
const linklistIcon = this.$('.linklist__item i');
linklistItem.each(function () {
linklistLink.prepend(linklistIcon);
})
不幸的是,添加了几个图标。我在做什么错了?
答案 0 :(得分:0)
$(".linklist__link").prepend(function() {
return $(this).prev(".fa")
})
li a {
border: 1px solid red;
}
<ul>
<li class="linklist__item">
<i class="fa fa-angle-right">ICON</i>
<a href="#" class="link linklist__link teasable__open" title="[Link title]">Lorem</a>
</li>
<li class="linklist__item">
<i class="fa fa-angle-right">ICON</i>
<a href="#" class="link linklist__link teasable__open" title="[Link title]">Lorem</a>
</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>