admin管理员组文章数量:1325756
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.
Share Improve this question asked Jul 6, 2013 at 11:54 Andrei SurduAndrei Surdu 2,3413 gold badges23 silver badges32 bronze badges2 Answers
Reset to default 5You 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
版权声明:本文标题:javascript - JQuery clone last element from each list row - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742191552a2430308.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论