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

Question

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

我有这个：

<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');

Answer 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>

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

Detaching element and append without multiply in div

jquery

clone

detach