Разделение divs с JQuery

Question

У меня есть следующая структура html (это всего лишь обзор, все divs имеют контент и правильно закрыты). Каждая div.views-строка содержит вид поля, название, вид поля тела и представление поля afbeeldingen

<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++; 
}); 

Answer 1

Это может сделать больше смысла делать each() над afbeeldingen дивы и поиск и перемещение братьев и сестер каждого из них:

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

Также обратите внимание, что все руководство странно, даже, во-первых, последние классы, которые у вас есть, могут быть легко реализованы с помощью соответствующего pseudo classes.

См. this fiddle.

Answer 2

Внутри .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() будет смотреть только на свои прямые ребенок и т.д ...