使用类名克隆第一个 div 并在下一个 div 之后追加答案

【问题标题】：clone first div and append after next div using class name使用类名克隆第一个 div 并在下一个 div 之后追加
【发布时间】：2017-09-10 14:21:16
【问题描述】：

我的结构如下：-

<div class="container">
    <h1 class="header-div">Title 1</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <div class="image-div">image1</div>
</div>
<div class="container">
    <h1 class="header-div">Title 2</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <div class="image-div">image2</div>
</div>
<div class="container">
    <h1 class="header-div">Title 3</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <div class="image-div">image3</div>
</div>

我想获取 h1 并将其附加在 .image-div 之后，并希望对每个块都这样做

【问题讨论】：

您有任何代码要显示吗？你有没有尝试过？
$(".header-div").clone().appendTo(".image-div");正在尝试这个。但是使用类名的问题。我只能选择使用类名选择器
@Yogi 你的代码输出是什么？
Title 1 Lorem Ipsum 只是印刷和排版行业的虚拟文本。 image1 Title 1 Title 2 Title 3 Title 2 Lorem Ipsum 只是印刷和排版行业的虚拟文本。 image2 Title 1 Title 2 Title 3 Title 3 Lorem Ipsum 只是印刷和排版行业的虚拟文本。 image3 标题 1 标题 2 标题 3

标签： javascript jquery html css image

【解决方案1】：

Fiddle

可以这样做

var container = $(".container");
$.each(container, function(k, e){
    $(e).find('.header-div').clone().appendTo($(e).find(".image-div"))
} )

each 循环遍历图像和标题 div 所在的主要 div 元素数组，然后将标题移动到另一个 DOM 位置。

【讨论】：

谢谢@Mantas .. 但我想在.image-div 之后追加...它在.image-div 中添加h1 div。但是，如果我将其设置为 var container = $(".container"); $.each(container, function(k, e){ $(e).find('.header-div').clone().appendTo($(this)) } )

【解决方案2】：

两件事

appendTo 将追加内部 div 不在 div之后。
无需迭代，它会将所有这些克隆在一起，并为每个image-div 附加所有这些克隆

你需要尝试

$(".header-div").each( function(){
  $(this).clone().insertAfter( $(this).parent().find( ".image-div" ) );
});

或

$(".header-div").each( function(){
  $(this).clone().appendTo( $(this).parent() );
});

【讨论】：

非常感谢@guruvinder372 第一个非常适合我:)