用Jquery重新排列div

我有以下的html结构（这只是一个概述，所有的div都有内容并且被正确关闭）。每个div.views行包含一个观点场标题，观点场体和意见，现场afbeeldingen用Jquery重新排列div

<div class="view view-toepassingen view-id-toepassingen view-display-id-page view-dom-id-5a6ac8323a7566e5f11218e7b6c49c5c"> 
    <div class="view-content"> 
    <div class="views-row views-row-1 views-row-odd views-row-first"> 
     <div class="views-field views-field-title"> 
     <div class="views-field views-field-body"> 
     <div class="views-field views-field-field-afbeeldingen"> 
    </div> 
    <div class="views-row views-row-2 views-row-even"> 
    <div class="views-row views-row-3 views-row-odd"> 
    <div class="views-row views-row-4 views-row-even"> 
    <div class="views-row views-row-5 views-row-odd"> 
    <div class="views-row views-row-6 views-row-even views-row-last"> 
</div>

我试图做到的，是重新排列的div于：（有效地移动标题和体格的“afbeeldingen” DIV中，和各个视图行）

<div class="view view-toepassingen view-id-toepassingen view-display-id-page view-dom-id-5a6ac8323a7566e5f11218e7b6c49c5c"> 
    <div class="view-content"> 
    <div class="views-row views-row-1 views-row-odd views-row-first"> 
     <div class="views-field views-field-field-afbeeldingen"> 
      <div class="views-field views-field-title"> 
      <div class="views-field views-field-body"> 
     </div> 
    </div> 
    <div class="views-row views-row-2 views-row-even"> 
    <div class="views-row views-row-3 views-row-odd"> 
    <div class="views-row views-row-4 views-row-even"> 
    <div class="views-row views-row-5 views-row-odd"> 
    <div class="views-row views-row-6 views-row-even views-row-last"> 
</div>

这是我行为不端的jQuery代码。我试图循环遍历所有6个视图行div。

var i = 1; 
$('.view-toepassingen > .view-content').children('div').each(function() { 
    $('.view-toepassingen > .view-content > .views-field-field-afbeeldingen').prepend($('.view-toepassingen > .view-content > .views-row-'+i +' .views-field-title')); 
    $('.view-toepassingen > .view-content > .views-field-field-afbeeldingen').prepend($('.view-toepassingen > .view-content > .views-row-'+i +' .views-field-body')); 
    i++; 
});

来源

2013-06-26 skrln

你的代码是如何行事不端？你看到错误吗？ – cfs

它可能会更有意义做each()在afbeeldingen的div和搜索和移动每一个兄弟姐妹：

$(".views-field-field-afbeeldingen").each(function() { 
    $(this).siblings(".views-field-title").appendTo(this); 
    $(this).siblings(".views-field-body").appendTo(this); 
});

另外请注意，所有手动奇数，偶数，首先，最后一堂课可以通过适当的pseudo classes更容易实现。

请参阅this fiddle。

来源

2013-06-26 14:19:42

里面.each回调，this指当前div项目。您可以使用$(this).find()通过这个节点的子搜索：

$('.view-toepassingen > .view-content').children('div').each(function() { 
    var $title = $(this).find('.views-field-title'); 
    var $body = $(this).find('.views-field-body'); 

    $(this).find('.views-field-field-afbeeldingen').append($title, $body); 
});

.find()将考虑该节点的所有儿童（在任何深度），.children()将只考虑它的直接孩子，等...

来源

2013-06-26 14:13:18 LeGEC

用Jquery重新排列div

回答

相关问题