如何利用jQuery replaceWith()返回值复用被移除的重复链接？

嗨，我来帮你梳理怎么优化这段代码，解决你关于replaceWith()返回元素存储和复用的问题~

首先，你说得没错，replaceWith()确实会返回被替换掉的原始元素的jQuery对象，我们完全可以把这些元素存起来，不用在hover时重新拼接链接。最方便的方式是把每个<li>对应的重复链接存在它自己的data属性里，这样hover时直接从当前li里取就行，比维护全局数组更清晰。

优化后的完整代码 #

JavaScript

jQuery(function ($) {
  // 第一步：移除重复链接并保存被移除的元素
  $(".widget li").each(function() {
    const $currentLi = $(this);
    // 获取当前li里的第一个链接
    const $firstLink = $currentLi.children('a:first-child');
    const firstLinkHref = $firstLink.attr('href');
    // 精准定位要检查的重复"Open"链接
    const $dupeLink = $firstLink.siblings('a.more-link');

    // 如果找到重复链接，就替换并保存
    if ($dupeLink.length && $dupeLink.attr('href') === firstLinkHref) {
      // replaceWith返回被替换的原链接元素，把它存在当前li的data里
      const $removedLink = $dupeLink.replaceWith('<span class="more-link">Open</span>');
      $currentLi.data('savedDupeLink', $removedLink);
    }
  });

  // 第二步：hover时恢复链接，离开时换回span
  $('.widget li').hover(
    // 鼠标进入时：恢复之前保存的链接
    function() {
      const $currentLi = $(this);
      // 从当前li的data里取出保存的链接
      const $savedLink = $currentLi.data('savedDupeLink');
      if ($savedLink) {
        // 用保存的原链接替换掉span
        $currentLi.children('span.more-link').replaceWith($savedLink);
      }
    },
    // 鼠标离开时：换回span，同时把链接重新存回data
    function() {
      const $currentLi = $(this);
      const $currentLink = $currentLi.children('a.more-link');
      if ($currentLink.length) {
        const $removedSpan = $currentLink.replaceWith('<span class="more-link">Open</span>');
        // 把链接重新存回data，方便下次hover复用
        $currentLi.data('savedDupeLink', $currentLink);
      }
    }
  );
});

CSS（保留你原来的即可）

ul { list-style-type: none; }
li, li > * { float: left; clear: left; display: block; }
li { padding-bottom: 1em; }
li a:first-child ~ * { padding-left: 1em; }
.more-link { border: 1px solid red; padding: .3em; }

HTML（保留你原来的即可）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="widget">
    <ul class="index-widget">
      <li>
        <a href="https://stackoverflow.com">Stack Overflow</a>
        <time>14 May 2018</time>
        <span class="index-excerpt">Answers questions</span>
        <a href="https://stackoverflow.com" class="more-link">Open</a>
      </li>
      <li>
        <a href="https://jquery.com">jQuery</a>
        <time>15 May 2018</time>
        <span class="index-excerpt">Prompts questions</span>
        <a href="https://jquery.com" class="more-link">Open</a>
      </li>
    </ul>
  </div>
</body>

关键细节解释 #

1. replaceWith()返回值的存储：
   这个方法返回的是被替换掉的原始元素，我们用$currentLi.data('savedDupeLink', $removedLink)把它存在当前<li>的自定义数据属性里，相当于给每个li绑定了自己的“备用链接”，不用操心全局数组的索引对应问题。

2. hover逻辑简化：
   鼠标进入时，直接从当前li的data里取出保存的链接元素，替换掉span就行，不用再重新拼接href和标签结构；鼠标离开时，再把链接换回span，同时把链接重新存回data，保证下次hover还能正常复用。

3. 精准选择元素：
   原代码里用siblings('a')可能会误选其他无关的a标签，改成siblings('a.more-link')只定位目标的“Open”链接，逻辑更严谨。

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