分离元素并追加而不在div中相乘

Posted 2023-02-16

【中文标题】分离元素并追加而不在div中相乘

【英文标题】：Detaching element and append without multiply in div

【发布时间】：2018-03-25 12:06:01

【问题描述】：

我想在我的 html 中分离或克隆 a 标签。 因为我使用页面构建器，所以我无法更改结构。 如果我有两个元素，就好像 a 标签被插入了两次。如果我有三个元素，它会显示 3 次。

我有这个：

<div class="wrapper">
    <div class="element">
        <div class="container">
            <h4>Headline</h4>
            <a href="#"></a>
        </div>
    </div>
    <div class="element">
        <div class="container">
            <h4>Headline</h4>
            <a href="#"></a>
        </div>
    </div>
</div>

我想要这个：

<div class="wrapper">
    <div class="element">
        <a href="#"></a>
        <div class="container">
            <h4>Headline</h4>
            <a href="#"></a>
        </div>
    </div>
    <div class="element">
        <a href="#"></a>
        <div class="container">
            <h4>Headline</h4>
            <a href="#"></a>
        </div>
    </div>
</div>

但我明白了：

<div class="wrapper">
    <div class="element">
        <a href="#"></a>
        <a href="#"></a>
        <div class="container">
            <h4>Headline</h4>
            <a href="#"></a>
        </div>
    </div>
    <div class="element">
        <a href="#"></a>
        <a href="#"></a>
        <div class="container">
            <h4>Headline</h4>
            <a href="#"></a>
        </div>
    </div>
</div>

//我的jQuery

$('.element .container a').clone().prependTo('.element');

【问题讨论】：

请花几分钟时间阅读 How to Ask 并用 runnable minimal reproducible example 重现问题

编辑问题

欢迎来到 ***！当一个问题将大量信息作为屏幕截图转储时，这被认为有点不礼貌。请编辑您的问题，将其缩减为最小的必要代码和输出示例来说明问题。

现在更新版本。抱歉，新来的 :)

【参考方案1】：

$('.element') 匹配这两个 div，因此每个克隆的链接都附加到它们。

避免不必要的重复的一种方法是具体说明每个克隆节点应附加到哪个.element：

$('.element .container a').each(function() 
  $(this).clone().prependTo(
    $(this).closest('.element')
  )
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="element">
    <div class="container">
      <h4>Headline</h4>
      <a href="#"></a>
    </div>
  </div>
  <div class="element">
    <div class="container">
      <h4>Headline</h4>
      <a href="#"></a>
    </div>
  </div>
</div>

【讨论】：

非常感谢！我以前试过这个，但它不正确。你救了我朋友:)

别担心，很高兴我能帮上忙！