Question

我有一个问题。

我如何遍历div中的每个h2，抓取它们的文本值并按照它们出现在另一侧的顺序将其附加到另一组div？

我可以使用eq或其他东西并通过每一个但这不是理想的，因为在任何给定时间div的数量可能更多或更少，我只需要返回并调整js来调整div的数量。

在这个例子中我还没有完成js只是因为我不确定如何处理这个问题。

感谢任何帮助。

Fiddle Example

由于

Answer 1

我认为使用.eq是您唯一的选择，但它不会使您的代码不灵活：

var $divs = $('.wrap-two div.item');

$('.wrap h2').each(function(index) {
    $divs.eq(index).text($(this).text());
});

// or alternatively:

var $h2s = $('.wrap h2');

$('.wrap-two div.item').text(function(index) {
    return $h2s.eq(index).text();
});

DEMO

其他div只会留空，而div太少也不是问题。 .eq将始终返回jQuery对象，即使具有该索引的元素不存在也是如此。然后，对.text的调用将被默默地忽略。

或者您希望始终拥有与div一样多的h2个？

Answer 2

您还可以clone()第一个列表到第二个列表，因为它们共享相同的.item类：

$('.wrap .item').clone().appendTo('.wrap-two');

http://jsfiddle.net/charlescarver/u2VY5/2/

Answer 3

检查这个小提琴.. http://jsfiddle.net/u2VY5/3/

$(function(){
    $('#btn1').on('click' , function(){
        var data = $('.wrap div h2');
        var target = $('.wrap-two div');

        $.each(data, function(i){
           $(target[i]).append('h2').text($(this).text());
        });

    });
});

迭代每个h2并按顺序将它们的值附加到另一组div

3 个答案: