Question

有什么建议吗？

我想在使用“new”按钮时在同一个li下面创建一个新的li。在我的例子中，.append在底部创建了新的li。
按钮（new，sub，up，down和x）应该出现在新的li中，怎么样？

请注意，如果这些问题需要大量且相当实质性的回复，我不希望任何人给予它。然后，如果这些列表属性需要一些其他类型的编码，.net和其他，我很高兴得到启发...

由于大卫

var presentedVC = self.window?.rootViewController as? UINavigationController
presentedVC(yourdesiredController, animated: true)

Answer 1

不是附加到ul，而是在当前li元素之后插入。

您也可以克隆并添加按钮，并使用事件委派来处理新按钮中的点击

$(document).ready(function() {
  $("ul").on('click', '.btn2', function() {
    $("<li/>", {
      text: '..............'
    }).append($(this).parent().children('button').clone()).insertAfter(this.parentNode);
  });
});

$(document).ready(function() {

  $("#btn3").click(function() {
    $("ul").append("<ul><li>..............</li>");
  });
});

$('ul').on('click', '.up', function() {
  $(this).parent().insertBefore($(this).parent().prev());
});

$('ul').on('click', '.down', function() {
  $(this).parent().insertAfter($(this).parent().next());
});

$('ul').on('click', '.remove', function() {
  $(this).parent().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul style="text-decoration:none">

  <li>..............
    <button class="btn2">New</button>
    <button class="btn3">Sub</button>
    <button class="up">Up</button>
    <button class="down">Down</button>
    <button class="remove">X</button>
  </li>



</ul>

Answer 2

你现在习惯像这样上课

我已经习惯 .prependTo() .closest 和 .remove()

＆＃13;

$(document).ready(function() {

      $(document).on('click','.btn2',function() {
        var thisLi = $(this).closest('li').clone();
        $(thisLi).prependTo('ul');
      });
  
  
  $(document).on('click','.remove',function() {
        $(this).closest('li').remove();
      });

  
  
 // $('.up').click(function() {
//      $(this).parent().insertBefore($(this).parent().prev());
  //  });

  
  //  $('.down').click(function() {
  //    $(this).parent().insertAfter($(this).parent().next());
 //   });

  
  //  $("button").click(function() {
 //     $("<li>").remove();
 //   });
 // 
  
  
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul style="text-decoration:none">

  <li>..............
    <button class="btn2">New</button>
    <button class="btn3">Sub</button>
    <button class="up">Up</button>
    <button class="down">Down</button>
    <button class="remove">X</button>
  </li>



</ul>

＆＃13;

Answer 3

＆＃13;

$(function(){	
  $(document).on('click', '.new', newItem);
  $(document).on('click', '.sub', subItem);
  $(document).on('click', '.remove', removeItem);
  $(document).on('click', '.up', moveUpItem);
  $(document).on('click', '.down', moveDownItem);
});

function newItem(){
  var $btn  = $(this),
      $li   = $btn.closest('li').clone(),
      $ul   = $btn.closest('ul'),
      count = $ul.find('li').length + 1;

  $li.find('span').text(count);
  $li.find('ul').remove();

  $ul.append($li);
}

function subItem(){
  var $btn     = $(this),
      $li      = $btn.closest('li'),
      $liClone = $btn.closest('li').clone(),
      hasSubs  = $li.find('ul').length > 0,
      $ul      = hasSubs ? $li.find('ul') : $('<ul>');

  var countSubs = $ul.find('li').length + 1;
  $liClone.addClass('sub-item');
  $liClone.find('span').text(countSubs);
  $liClone.find('ul').remove();

  $ul.append($liClone);

  if(!hasSubs)
    $li.append($ul);
}

function removeItem(){
  var $li     = $(this).closest('li'),
      liCount = $li.closest('ul').find('li').length;

  if(liCount > 1 || $li.hasClass('sub-item'))
    $li.remove();
  else
    alert('este é o ultimo.');
}

function moveUpItem () {
  var $li = $(this).closest('li'),
      $ul = $li.closest('ul'),
      index = $li.index() + 1;

  if(index > 1){
    var $temp = $li.detach();
    $ul.find('li:nth-child('+(index - 1)+')').before($temp);
  }
}

function moveDownItem () {
  var $li = $(this).closest('li'),
      $ul = $li.closest('ul'),
      count = $ul.find('li').length,
      index = $li.index() + 1;

  if(index < count){
    var $temp = $li.detach();
    $ul.find('li:nth-child('+(index)+')').after($temp);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<ul>
  <li>
  	<span>1</span>
    <button class="new">New</button>
    <button class="sub">Sub</button>
    <button class="up">Up</button>
    <button class="down">Down</button>
    <button class="remove">X</button>
  </li>
</ul>

＆＃13;

ul - li。新的等排（li），下面

3 个答案: