用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

回答

相關問題