Question

HTML

<div class="header link1">Lorem</div>
<div class="header link2">Ipsum</div>

<div class="footer link1"></div>
<div class="footer link2"></div>

我希望将divs'header'的内容复制到div的'footer'，然后我们可以这样做：

的jQuery

$('.footer.link1').append($('.header.link1').text());
$('.footer.link2').append($('.header.link2').text());

但我想这样做：

的jQuery

$('.link1, .link2, .link3, .link4, .link5').each(function(){
$('.footer'.this).append($('.header'.this).text());
});

Answer 1

因为你有多个类会使它变得有点困难 - 这个解决方案要求你按照这个顺序保留类。我只获取所有.footer个元素，然后使用.append(function()方法附加相关.header元素中的文本

$('.footer').append(function(){
    return $('.header.'+this.classList[1]).text();
});

这假设您将.link1，.link2保留为第二个类，因为我使用.classList来访问第二个类

FIDDLE

或使用更多跨浏览器方式

$('.footer').append(function(){
    return $('.header.'+this.className.split(' ')[1]).text();
});

FIDDLE

Answer 2

$('.link1, .link2, .link3, .link4, .link5').each(function(){
if($(this).hasClass("header"))
{
  var classes = this.className.split(' ');
    $(".footer." + classes[1]).html($(this).text());

}
});

这是工作或

$('.link1, .link2, .link3, .link4, .link5').each(function(){

  var classes = this.className.split(' ');
    $(".footer." + classes[1]).html($(".header."+ classes[1]).text());


});

Answer 3

一种简单的方法，只使用.link元素的类名，而不是jQuery / DOM元素本身：

$(['.link1',  '.link2', '.link3', '.link4', '.link5']).each(function(i, class_selector){
    $('.footer' + class_selector).append($('.header' + class_selector).text());
});

如果你想通过做所有DOM元素来复杂化（可能有充分的理由去这条路线），那么：

$('.link1, .link2, .link3, .link4, .link5').each(function(){
    if ( ! $(this).hasClass('header') ) return;
    var $tmpElement = $(this).clone();
    $tmpElement.removeClass('header');
    var class_selector = '.' + $tmpElement.attr('class').split(' ').join('.');
    $('.footer' + class_selector).append($('.header' + class_selector).text());
});

修改

JSFiddles：

http://jsfiddle.net/cek125i/wLujh/

http://jsfiddle.net/cek125i/wLujh/1/

如何使用“this”调用同一个类与另一个类相结合？

3 个答案: