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

Posted 2023-04-13

【中文标题】在 each() 中循环并结合 prepend()

【英文标题】：Loop in each() in combination with prepend()

【发布时间】：2018-08-21 15:40:22

【问题描述】：

我想在 DOM 中移动 html 标记（在本例中为图标）。

我的 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);
  )

遗憾的是添加了几个图标。我做错了什么？

【问题讨论】：

为什么引用this / being / window？

“遗憾的是添加了几个图标”，因为'.linklist__item i' 匹配每个图标。

@Andreas 这是有道理的。我该如何解决这个问题？

【参考方案1】：

$(".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>

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。