0

我的 Header 菜单上有两个<div>具有不同类名的 s：

<div class="header lorem menu right"><a>Lorem</a></div>
<div class="header ipsum menu right"><a>Ipsum</a></div>

我想复制那些<div>内容

<a>Lorem</a>
<a>Ipsum</a>

并附加到我的页脚菜单：

<div class="footer lorem menu right"></div>
<div class="footer ipsum menu right"></div>

我可以使用以下函数来做到这一点：

$('.footer.lorem').append($('header.lorem').html());
$('.footer.ipsum').append($('header.ipsum').html());

但我想让这个功能成为一种自动化的方式，所以我可以调用例如：

$('.lorem').each(function(){
   $('.footer' + THE-NAME-CALLED).append($('.header' + THE-NAME-CALLED).html());
});

所以这样做我可以对多个类使用相同的函数，例如：

$('.lorem, .ipsum, .dolor, .sit, .amet').each(function(){
   $('.footer' + THE-NAME-CALLED).append($('.header' + THE-NAME-CALLED).html());
});

请建议如何做到这一点。

4

3 回答 3

2

我会这样做：

$.each(['.lorem', '.ipsum'], function(_, cls) {
    var $src = $('.header').filter(cls);
    var $dst = $('.footer').filter(cls);
    $src.clone().appendTo($dst);
});

为了提高效率，还可以将$('.header')jQuery$('.footer')对象评估移到循环之外：

var $header = $('.header');
var $footer = $('.footer');
$.each(['.lorem', '.ipsum'], function(_, cls) {
    var $src = $header.filter(cls);
    var $dst = $footer.filter(cls);
    $src.clone().appendTo($dst);
});

请注意，使用序列化 ( .html) 和反序列化来复制元素通常是不好的做法。它会破坏任何事件处理程序或附加到这些元素的其他数据。相反，该.clone方法直接在 DOM 节点上工作，而不是在它们的序列化格式上工作。

于 2013-10-31T17:29:41.663 回答
1

如果我正确理解你的问题，这样的事情应该有效：

$.each(['.lorem', '.ipsum', '.dolor', '.sit', '.amet'], function(i, value) {
     $('.footer' + value).append($('.header' + value).html());
});
于 2013-10-31T17:28:48.703 回答
0

假设.header和.footer div元素在复制时遵循相同的顺序，您可以使用index：

$('.header').each(function() {
    var $header = $(this);
    $('.footer').eq($header.index()).text($header.text());
});

示例小提琴

于 2013-10-31T17:30:06.820 回答