JQuery клон и приложение, чтобы дублировать неправильный контент - PullRequest
Новая
       25

JQuery клон и приложение, чтобы дублировать неправильный контент

2 голосов
/ 23 июля 2010

Я пытаюсь ввести форму ввода текста.Все входы будут в упорядоченном списке OL / LI структуры.Рядом со входом будет символ +, который, когда вы щелкнете по нему, должен создать вспомогательный OL и создать вторичный список с другим входом.Если вы щелкнете по нему еще раз, он добавит другой ввод.Новые входы также имеют символы +, и вы можете сделать то же самое.Я только технически хочу, чтобы это углубилось в три, но я думаю, что смогу разобраться с этой частью позже, но на самом деле я хочу узнать, как это сделать.

У меня есть начальная фаза,но он дублирует LI, и я не уверен, что происходит.Это то, что у меня есть. 

    $('.add_sub_page').live('click',function(e){
    $("<ol>").append($(this).parent().clone()).insertAfter(this);
    e.preventDefault();
});

Я поднял это в чат-комнате IRC, и мне предоставили это решение, но у него та же проблема, что и у моего первого решения, поэтому я не уверен, чтос ним легче работать или нет, поэтому я предоставлю его. 

    $('.add_sub_page').live('click',function(e){
    var ol = $("ol",this), new_ol = ol.length ? false : true;

    ol = new_ol ? $("<ol>") : ol;

    ol.append($(this).parent().clone());

    if (new_ol) {
        ol.insertAfter(this);
    }

    e.preventDefault();
});

И просто чтобы вы могли видеть, с каким HTML я работаю ... 

<form id="sitemap" action="" method="post">
<ol>
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li>
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li>
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li>
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li>
    <li class="page-title"><label>Page Name: </label><input type="text" name="pages[]" value=""><a class="add_sub_page">+</a></li>
</ol>
<p><input type="submit" name="submit_step1" value="Next Step"></p>
</form>

Вы можетеПредварительный просмотр проблемы на http://jsbin.com/everu3 - дважды нажмите на тот же знак Плюс (+), чтобы увидеть проблему.

Спасибо за любую помощь, которую вы можете предоставить!

1 Ответ

2 голосов
/ 23 июля 2010

Вам просто нужно удалить те дочерние <ol> элементы, которые вы добавили ранее при добавлении, например: 

$('.add_sub_page').live('click',function(e){
  $("<ol>").append($(this).parent().clone().children('ol').remove().end())
           .insertAfter(this);
  e.preventDefault();
});​

Вы можете попробовать здесь , все, что мыделать другое - когда вы клонируете, он ищет .children(), которые являются <ol> элементами, выполняет .remove() над ними из клонированного набора и использует .end() для восстановления цепочки до исходного клонированного элемента, так как это тот, который вы хотите добавить.

Редактировать: исходная версия создала <ol>, чтобы получитьтекущая нумерация, нам нужна одна <ol> рядом с <a>, которую мы нажимаем.Чтобы сделать это, измените это немного следующим образом: 

$('.add_sub_page').live('click',function(e){
  $(this).parent(':not(:has(ol))').append('<ol></ol>');
  $(this).next().append($(this).parent().clone().children('ol').remove().end());
  e.preventDefault();
});​

Попробуйте здесь .То, что это делает, это идет к родителю, только если у него нет <ol> и добавляет <ol> (если у него уже есть тот, который .append()не бегаю ни во что)Тогда мы просто ищем тот <ol>, который должен быть элементом .next(), и добавляем к нему.

Также вот немного измененная версия , которая останавливается на 3 уровнях: 

$('.add_sub_page').live('click',function(e){
  $(this).parent(':not(:has(ol))').append('<ol></ol>').end()
         .next().append($(this).parent().clone().children('ol').remove().end());
  if($(this).parents('.page-title').length == 2)
     $(this).next().find('.add_sub_page').remove();
  e.preventDefault();
});​
...