Question

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

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

但我想以自动方式使这个功能，所以我可以调用Eg：

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

所以这样做我可以为多个类使用相同的函数Eg：

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

请建议如何执行此操作。

Answer 1

我会这样做：

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

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

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节点上工作，而不是在序列化格式上工作。

Answer 2

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

$.each(['.lorem', '.ipsum', '.dolor', '.sit', '.amet'], function(i, value) {
     $('.footer' + value).append($('.header' + value).html());
});

Answer 3

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

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

Example fiddle

如何获取被调用的类的名称

3 个答案: