Jquery-Clone()追加

Question

我正面临着一个问题，试图克隆一个父div，然后将它直接附加到它自己的下面。只要选择了最后一个节点，我的函数就可以正常工作：

 <div>
 <div> A </div>
 <div> B </div>
 <div> C </div>
   </div>

将导致

<div>
 <div> A </div>
   <div> A.1 </div> 
 <div> B </div>
 <div> C </div>
   </div>

如果我克隆A，但如果我再次克隆A，我会得到。

<div>
 <div> A </div>
   <div> A.1 </div>
 <div> A </div>
   <div> A.1 </div>
 <div> B </div>
 <div> C </div>
   </div>

虽然我想

<div>
 <div> A </div>
   <div> A.1 </div>
   <div> A.1 </div>
 <div> B </div>
 <div> C </div>
   </div>

我的标记和代码如下：

<div id="maindiv">
 <div>
  <label>First</label> 
  <input type="button" class="repeat1" onclick="Repeat(this)"/>
 </div>
 <div>
  <label>Second</label> 
  <input type="button" class="repeat1" onclick="Repeat(this)"/>
 </div>
 <div>
  <label>Third</label> 
  <input type="button" class="repeat2" onclick="Repeat(this)"/>
 </div>

</div>

function Repeat(obj)
{
 var CurrentDiv = $(obj).parents("div[class^='repeat']:first");
 $(CurrentDiv).clone().appendTo(CurrentDiv).end();

}

我也有一个类似的问题，在删除时，所有的子节点都被删除了，而我只想删除一个div。任何帮助都将不胜感激。删除函数是

function Remove(obj)
    {
     var CurrentDiv = $(obj).parents("div[class^='repeat']:first");
     CurrentDiv.remove();

    }

Answer 1

这就是你想要做的吗？

function Repeat(obj)
{
 var currentDiv = $(obj).parent("div");
 currentDiv.clone().insertAfter(currentDiv);
}

更新:如果你想要嵌套，试试这个：

<div id="maindiv">
  <ul>First
   <li>
    <label>Sub-first</label> 
    <input type="button" class="repeat1" onclick="Repeat(this)"/>
   </li>
 </ul>

 <ul>Second
  <li>
   <label>Sub-second</label> 
   <input type="button" class="repeat1" onclick="Repeat(this)"/>
  </li>
 </ul>

 <ul>Third
  <li>
   <label>Sub-third</label> 
   <input type="button" class="repeat2" onclick="Repeat(this)"/>
  </li>
 </ul>   
</div>

<script>   
function Repeat(obj)
  {
    var CurrentLi = $(obj).parent("li");
    CurrentLi.clone().insertAfter(CurrentLi);
  }
</script>

Answer 2

我认为你的标记被混淆了：

<div>
 <div> A </div>
 <div> B </div>
 <div> C </div>
</div>

在repeat的正文中使用以下内容：

$(obj).clone().text('A 1').insertAfter(obj);

应生成：

<div>
 <div> A </div>
 <div>A 1</div>
 <div> B </div>
 <div> C </div>
</div>

同样，将其用作remove函数的主体：$(obj).siblings('div:first').remove();

然后应该这样做：

<div>
 <div>A 1</div>
 <div> B </div>
 <div> C </div>
</div>

这是你想要做的还是我误解了？另外，"repeat*“类的含义是什么，或者它是用来作为您正在尝试实现的东西的选择器的吗？

Answer 3

两件事：

• (1)在我看来，对$.end()的调用是多余的；我相信$.end()只有在你要在后面链接更多的调用时才有用。
• (2)看起来你试图将CurrentDiv的克隆附加为CurrentDiv的直接子级(而不是兄弟级)；因为这两个元素都是元素，所以我不确定它是否有意义。

但如果它确实有意义，那么在第二次调用Repeat()时，A和前一个克隆都将被克隆，这是完全自然的。

最后--仅供参考，您的变量和函数名不是惯用的。更习惯的做法是以小写字母开头。