jQuery 在 dom 元素内进行 DOM 更改

Question

我有一个像这样的 4 div:

<div class="content">
    <div class="col">
        <h3>A title</h3>
        <img src="..." alt="">
    </div>
    <div class="col">
        <h3>Another title</h3>
        <img src="..." alt="">
    </div>
    <div class="col">
        <h3>A title</h3>
        <img src="..." alt="">
    </div>
    <div class="col">
        <h3>Another title</h3>
        <img src="..." alt="">
    </div>
</div>

我不确定该如何解释，但我想在每个 2 .col div 中反转 <h3> 和 <img>。最终内容应如下所示：

<div class="content">
    <div class="col">
        <img src="..." alt="">
        <h3>A title</h3>
    </div>
    <div class="col">
        <h3>Another title</h3>
        <img src="..." alt="">
    </div>
    <div class="col">
        <img src="..." alt="">
        <h3>Another title</h3>
    </div>
    <div class="col">
        <h3>Another title</h3>
        <img src="..." alt="">
    </div>
</div>

我尝试了一些调整，例如 $('.col:odd img').insertAfter( "h3" ); 或

var myImg = $( "h3" );
$('.col:odd').find( myImg ).insertAfter( "h3" );

和很多蹩脚的代码，但没有设法找到一个好的方法来做到这一点。我的 Google/Whosebug 搜索似乎 return 没有好的结果。我可能没有正确搜索？

有人clue/idea要这样做吗？

谢谢你，对不起英语:/

Answer 1

您可以使用

:even select或select替代元素
使用each()遍历元素
Context selector到select当前元素里面的元素
insertAfter() 在传递的元素之后移动元素。

代码：

$('.content .col:even').each(function () {
    $('h3', this).insertAfter($('img', this));
});

$('.content .col:even').each(function() {
  $('h3', this).insertAfter($('img', this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content">
  <div class="col">
    <h3>A title</h3>
    <img src="http://lorempixel.com/400/200/sports/1/" alt="">
  </div>
  <div class="col">
    <h3>Another title</h3>
    <img src="http://lorempixel.com/400/200/sports/2/" alt="">
  </div>
  <div class="col">
    <h3>A title</h3>
    <img src="http://lorempixel.com/400/200/sports/3/" alt="">
  </div>
  <div class="col">
    <h3>Another title</h3>
    <img src="http://lorempixel.com/400/200/sports/4/" alt="">
  </div>
</div>

Answer 2

试试这个，

 $(document).ready(function(){
  $.each($(".col"),function(key,val){
   $($(val).children()[0]).before($($(val).children()[1]));
  });  
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content">
    <div class="col">
        <h3>A title</h3>
        <img src="..." alt="">
    </div>
    <div class="col">
        <h3>Another title</h3>
        <img src="..." alt="">
    </div>
    <div class="col">
        <h3>A title</h3>
        <img src="..." alt="">
    </div>
    <div class="col">
        <h3>Another title</h3>
        <img src="..." alt="">
    </div>
</div>

jQuery 在 dom 元素内进行 DOM 更改

jQuery make DOM changements inside a dom element

jquery

dom

this