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

Question

HTML

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

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

我希望将 div '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

一种简单的方法，只使用.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/

Answer 2

因为你有多个类，所以它有点困难——这个解决方案要求你保持这些类的顺序。我只是获取所有元素，然后使用.append(function()方法.footer从相关元素中附加文本.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 3

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


});