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);
    });
});

<强> Check Fiddle

Answer 2

替代

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

在jsfiddle

上

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

2 个答案: