jQuery如何将一个元素的所有内容替换为另一个？

Question

说我有3个类似下面的元素，它们具有不同的html内容：

<div id='result1'> <p>One</p> </div>
<div id='result2'> <p>Two</p> </div>
<div id='result3'> <p>Three</p> </div>

如何将div元素中的内容仅复制到下一个，以便最终结果如下所示？

<div id='result1'> <p>New content</p> </div>
<div id='result2'> <p>One</p> </div>
<div id='result3'> <p>Two</p> </div>

将有新内容要替换，最后的内容可以丢弃。 为了澄清，我将有类似以下内容：

<div id='new'> <p>New content</p> </div>

我想在其中获取'<p>New content</p>'作为要使用的新内容。

你怎么看？

Answer 1

要下推内容，请反转集合并将HTML设置为上一个的HTML。

var elems = $($('[id^=result]').get().reverse());

elems.html(function(i) {
    return elems.eq(i+1).html();
}).last().html('New Content');

小提琴

Answer 2

您可以在要更改内容的元素上使用.html（） 。 要访问特定元素，可以将ID选择器（“ #id”）与子选择器（“父>子”）一起使用 。

现场演示

$('#result1 > p').html('New content');

编辑以将内容移至下一个元素，您可以遍历所有元素并开始分配倒数第二个，倒数第三个至倒数的上下文，依此类推

现场演示

elements = $('[id^=result] > p');
len = elements.length;
elements.each(function(idx, el){
   if(idx == elements.length-1) return; 
   $('#result'+ (len-idx) + ' p').html($('#result' + (len-idx-1) + ' p').html());   
});

$('#result1 > p').html('New content');

Answer 3

尝试JS 小提琴

我建议添加一个父网格并使用jquery first（）和last（），这些控件的功能将类似于队列。

$('#Pdiv').children().last().remove();
$('#Pdiv').first().prepend("<div id='new'> <p>I am New One</p></div>");

alert($('#Pdiv').children().first().html());