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

我正在尝试克隆每个列表行的最后一个元素。我可以克隆行（在这种情况下，我需要克隆第一个元素），但不能从每个

li

中克隆最后一个

span

。以下是我到目前为止的情况：

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>

JSFiddle:

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

---

我将感谢任何帮助。提前感谢。

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

您还需要在当前li的上下文中克隆最后一个span。否则，它将克隆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);
    });
});

另一种选择

Javascript

$(".new_row").click(function (e) {
    e.preventDefault();
    var elements = $(e.target).siblings(".elements").first();

    elements.append($("li", elements).first().clone());
});

$(".new_column").click(function (e) {
    e.preventDefault();
    $("li", $(e.target).siblings(".elements").first()).each(function (index, element) {
        $(element).append($("span", element).last().clone());
    });
});

---

在

上，你的第一个答案不起作用。但这次它起作用了。美好的嗯，你说得对，忘了添加新的克隆元素。愚蠢的错误。谢谢你的帮助是的，但在我的例子中，我正在克隆第一行和最后一列。您的代码克隆最后一行，而不是第一行。；）哎呀，容易出错，而且已经修复。