0

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

2 に答える 2

0

each()div に対して実行し、afbeeldingenそれぞれの兄弟を検索して移動する方が理にかなっている場合があります。

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

また、すべての手動の​​奇数、偶数、最初、最後のクラスは、適切な疑似クラスを使用してより簡単に実装できることに注意してください。

このフィドルを参照してください。

于 2013-06-26T14:19:42.087 に答える
0

.eachコールバック内でthis、現在のdivアイテムを参照します。$(this).find()このノードの children を検索するために使用できます。

$('.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-26T14:13:18.383 に答える