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');

FIDDLE

Answer 2

您可以在要更改内容的元素上使用.html()。要访问特定元素，您可以将ID Selector (“#id”)与Child Selector (“parent > child”)一起使用。

<强> Live Demo

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

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

<强> Live Demo

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 fiddle

我建议添加一个父网格并使用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());

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

3 个答案: