Question

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

我有这个：

<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，因此每个克隆的链接都附加到这两个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中不加倍地追加

1 个答案: