0

HTML

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

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

div の「ヘッダー」の内容を div の「フッター」にコピーするには、次のようにします。

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

3 に答える 3

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

}
});

これは仕事です OR

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

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


});
于 2013-10-31T14:50:40.743 に答える
0

.linkjQuery / 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:

于 2013-10-31T14:55:44.427 に答える