Jquery：在容器内交换容器

Question

还在学习jquery。我想在父div中交换标题和图像。有任何想法吗？非常感谢！

<div id="main">
<div class="image">IMAGE</div>
<div class="title">TITLE</div>
</div>

<div id="main">
<div class="image">IMAGE</div>
<div class="title">TITLE</div>
</div>

<div id="main">
<div class="image">IMAGE</div>
<div class="title">TITLE</div>
</div>

--------------------------------------------

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#main div").each(function(){
  $("#main").append($('.image'));

});
});
</script>

Answer 1

试试这个： - http://jsfiddle.net/adiioo7/YzXye/

此外，您不应该使用具有相同ID的多个元素。

<强> JS： -

$(document).ready(function () {
    $(".main").each(function () {
        $(this).append($(this).find('.image'));

    });
});

<强> HTML： -

<div class="main">
    <div class="image">IMAGE</div>
    <div class="title">TITLE</div>
</div>
<div class="main">
    <div class="image">IMAGE</div>
    <div class="title">TITLE</div>
</div>
<div class="main">
    <div class="image">IMAGE</div>
    <div class="title">TITLE</div>
</div>

Answer 2

首先将id转换为class，因为id必须为unique并尝试此类似，

<强> HTML

<div class="main">
    <div class="image">IMAGE</div>
    <div class="title">TITLE</div>
</div>
<div class="main">
    <div class="image">IMAGE</div>
    <div class="title">TITLE</div>
</div>
<div class="main">
    <div class="image">IMAGE</div>
    <div class="title">TITLE</div>
</div>

<强> SCRIPT

$(document).ready(function(){
   $(".main").each(function(){
       $image= $(this).find('.image');
       $clone=$image.clone();
       $image.remove();
       $(this).append($clone);
   });
});

或

$(document).ready(function () {
    $(".main").each(function () {
        $(this).find('div.title').after($(this).find('div.image'));
    });
});

Demo和Demo 1

Answer 3

修复ID /类问题后，这是一个简短的解决方案：

$(".main").each(function () {
    $(this).find('div:eq(1)').after($(this).find('div:eq(0)'));
});

<强> jsFiddle example