JQuery 克隆每个列表行的最后一个元素

Question

我正在尝试克隆每个列表行中的最后一个元素。我可以克隆行（在这种情况下我需要克隆第一个元素），但我无法span从每个li. 这是我到目前为止所拥有的：

HTML：

<ul class="elements">
    <li>
        <span>Span 1</span>
        <span>Span 2</span>
        <span>Span 3</span>
    </li>
    <li>
        <span>Span 4</span>
        <span>Span 5</span>
        <span>Span 6</span>
    </li>
</ul>
<a href="#" class="new_row">Add new row</a>
<a href="#" class="new_column">Add new column</a>

jQuery：

$('.new_row').click( function(e) {
    e.preventDefault();
    var ul = $(this).prev('.elements');

    var new_data= $("li", ul).eq(0).clone();
    new_data.appendTo(ul);
});
$('.new_column').click( function(e) {
    e.preventDefault();
    $('li').each(function(){
        $('span:last').clone();
    });
});

JSFiddle： http: //jsfiddle.net/vPDpH/

我将不胜感激任何帮助。预先感谢。

Answer 1

您正在克隆该元素，但没有对其执行任何操作..

此外，您还需要在当前 li 的上下文中克隆最后一个跨度。否则它将克隆HTML 中的最后一个跨度，无论它在哪里

$('.new_row').click( function(e) {
    e.preventDefault();
    var ul = $(this).prev('.elements');

    var new_data= $("li", ul).eq(0).clone();
    new_data.appendTo(ul);
});
$('.new_column').click( function(e) {
    e.preventDefault();
    $('li').each(function(){
       var new_data= $('span:last', this).clone();
        new_data.appendTo(this);
    });
});

检查小提琴