与prepend()结合在each()中循环

时间:2018-08-21 15:40:23

标签: javascript jquery each prepend

我想在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);
  })

不幸的是,添加了几个图标。我在做什么错了?

1 个答案:

答案 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>