javascript - JQuery clone last element from each list row - Stack Overflow

admin管理员组

文章数量:1326123

I'm trying to clone last element from each list row. I can clone rows(i need to clone first element in this case), but I can't clone last span from each li. Here is what I have so far:

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: /

I would appreciate any help. Thank in advance.

I'm trying to clone last element from each list row. I can clone rows(i need to clone first element in this case), but I can't clone last span from each li. Here is what I have so far:

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/vPDpH/

I would appreciate any help. Thank in advance.

• javascript
• jquery
• clone

Share Improve this question Follow asked Jul 6, 2013 at 11:54 Andrei SurduAndrei Surdu 2,34133 gold badges2323 silver badges3232 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You are cloning the element but not doing anything with it ..

Also you need to clone the last span in the context of current li. Otherwise it will clone the last span in the HTML irrespective of where it is

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

An alternative

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

On jsfiddle

本文标签： javascriptJQuery clone last element from each list rowStack Overflow