Jquery-Clone () - PullRequest
Новая
       26

Jquery-Clone ()

3 голосов
/ 03 февраля 2010

Я сталкиваюсь с проблемой, когда пытаюсь клонировать родительский 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>

Если я клонирую А. Но если я клонирую А снова, я получаю. 

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

    }

Ответы [ 3 ]

6 голосов
/ 03 февраля 2010

Это то, что вы пытаетесь сделать? 

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

UPDATE: Если вы хотите вложения, попробуйте это: 

<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>
1 голос
/ 03 февраля 2010

Две вещи:

  • (1) То, как я это читаю, вызов $ .end () излишен; Я считаю, что $ .end () полезен только в том случае, если вы собираетесь связывать больше вызовов после него.

  • (2) Похоже, вы пытаетесь присоединить клон CurrentDiv в качестве прямого потомка (не родного брата) CurrentDiv; Поскольку оба эти элемента, я не уверен, имеет ли это смысл.

Но если это имеет смысл, то вполне естественно, что и A, и предыдущий клон будут клонированы во втором вызове Repeat ().

И наконец - только к вашему сведению, ваши имена переменных и функций не являются идиоматическими. Обычно принято начинать со строчной буквы.

1 голос
/ 03 февраля 2010

Я думаю, что ваша разметка запуталась: 

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

используя это в теле повторения:

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

должен произвести: 

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

Аналогично, используя это как тело вашей функции удаления: $(obj).siblings('div:first').remove();

должен сделать следующее: 

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

Это то, что вы пытаетесь сделать, или я неправильно понимаю? Кроме того, каково значение класса «repeat *» или его нужно использовать в качестве селектора для того, что вы пытаетесь реализовать?

...