使用 Jquery 重新排列 div答案

【问题标题】：Rearranging divs with Jquery使用 Jquery 重新排列 div
【发布时间】：2013-06-26 14:04:52
【问题描述】：

我有以下 html 结构（这只是一个概述，所有 div 都有内容并正确关闭）。每个 div.views-row 包含一个 views-field-title、views-field-body 和 views-field-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 重新排列为：（有效地将标题和正文 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++;
});

【问题讨论】：

您的代码表现如何？你看到错误了吗？

标签： jquery iteration

【解决方案1】：

在afbeeldingen div 上执行each() 并搜索和移动每个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。

【讨论】：

【解决方案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() 将仅查看其直接子节点，等等...

【讨论】：