ul - li. Новая равная строка (li), ниже

Question

Любые предложения?

1. Я хочу, чтобы новый li был создан под одним и тем же ли при использовании кнопки «новый». В моем примере .append создает новый li внизу.

2. Кнопки (новые, вспомогательные, вверх, вниз и x) должны появиться в новом ли, как?

Appologize for, если эти вопросы требуют большой и довольно существенной реакции, и я не ожидаю, что кто-нибудь ее даст. Затем, если эти атрибуты списка требуют какой-либо другой тип кодирования, .net и других, Im счастлив быть просветленными ...

Благодаря Дэвид

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<ul style="text-decoration:none"> 
 

 
    <li>.............. 
 
    <button id="btn2">New</button> 
 
    <button id="btn3">Sub</button> 
 
    <button class="up">Up</button> 
 
    <button class="down">Down</button> 
 
    <button>X</button> 
 
    </li> 
 

 
    <script> 
 
    $(document).ready(function() { 
 
     $("#btn2").click(function() { 
 
     $("ul").append("<li>..............</li>"); 
 
     }); 
 
    }); 
 
    </script> 
 

 
    <script> 
 
    $(document).ready(function() { 
 

 
     $("#btn3").click(function() { 
 
     $("ul").append("<ul><li>..............</li>"); 
 
     }); 
 
    }); 
 
    </script> 
 

 
    <script> 
 
    $('.up').click(function() { 
 
     $(this).parent().insertBefore($(this).parent().prev()); 
 
    }); 
 

 
    $('.down').click(function() { 
 
     $(this).parent().insertAfter($(this).parent().next()); 
 
    }); 
 
    </script> 
 

 
    <script> 
 
    $("button").click(function() { 
 
     $("<li>").remove(); 
 
    }); 
 
    </script> 
 

 
</ul>

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

$(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(); 
 
// }); 
 
// 
 
    
 
    
 
    });

<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 3

$(function(){ \t 
 
    $(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); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    \t <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>