1

ウィンドウが 400px 未満の場合、.treatyDetails 内で .treamentCost を移動したい

これは正常に動作します。私の問題は、そのすぐ上の div (.test) 内の . TreatmentCost のみを下の . TreatmentDetails 内に移動することです。

現時点では、すべての . TreatmentCost が見つかり、 . TreatmentDetails の先頭に追加されます

問題を確認するには、以下の js フィドルを参照してください。幅 400 ピクセル以上のフィドル結果ウィンドウでフィドルを実行すると、'£100' と '£200' が灰色の . TreatmentDetails div の外にあることがわかります。ブラウザーをドラッグして、結果ウィンドウの幅が 400px 未満になり、フィドルを再度実行すると、. TreatmentCosts が . TreatmentDetails 内に追加されていることがわかります。

現時点で起こっているように、すべての div の前に . TreatmentCost のクラスを追加するのではなく、. TreatmentDetails の前に指示された「. test」 div 内の「. TreatmentCost」のみが必要です。

したがって、成功した最終結果は、「£100」が最初のグレー div 内にあり、「£200」が 2 番目のグレー div 内にあるということです。

http://jsfiddle.net/fzMHq/1/

// コード //

//JS //

<script>
if ($(window).width() < 400) {
    $(".treatmentDetails").prepend( $(".treatmentCost") );
}
</script>

// HTML //

<div id="accordion">

<div class="test dark">

<div class="treatmentLeft">
<p>Face Mapping Skin Analysis</p>
</div><!--treamentLeft close-->

<div class="treatmentLength">
<p>10 mins</p>
</div><!--treamentLength close-->

<div class="treatmentCost">
<p>£100</p>
</div><!--treamentCost close-->

</div><!--test close-->

<div class="treatmentDetails dark" style="background-color: #eee;">
<p>Our Face Mapping skin analysis will enable our therapist to diagnose your skin’s
concerns and recommend a home-care and treatment regimen to ensure your optimum skin
health. This is a professional consultation that will give your skin its healthiest
future.</p>
</div><!--treamentDetails close-->




<div class="test dark">

<div class="treatmentLeft">
<p>Face Mapping Skin Analysis</p>
</div><!--treamentLeft close-->

<div class="treatmentLength">
<p>10 mins</p>
</div><!--treamentLength close-->

<div class="treatmentCost">
<p>£200</p>
</div><!--treamentCost close-->

</div><!--test close-->

<div class="treatmentDetails dark" style="background-color: #eee;">
<p>Our Face Mapping skin analysis will enable our therapist to diagnose your skin’s 
concerns and recommend a home-care and treatment regimen to ensure your optimum skin
health. This is a professional consultation that will give your skin its healthiest
future.</p>
</div><!--treamentDetails close-->

</div><!--ACCORDION close-->
4

4 に答える 4

1

デモ

if ($(window).width() < 400) {
    $(".treatmentDetails").each(function () {
        $(this).prepend($(this).prev(".test").find('.treatmentCost'));
    });
}

.children('.treatmentCost'));代わりに使用できます.find('.treatmentCost'));

デモ

コーディングしたい場合$(window).resize()

$(window).resize(function () {
    if ($(window).width() < 400) {
        $(".treatmentDetails").each(function(){
            $(this).prepend($(this).prev(".test").find('.treatmentCost'));
        });
    }
});
于 2013-08-20T17:02:23.993 に答える
0

サイズ変更機能を両方向で機能させたい場合は、Tushar Guptaの回答に追加します。

実施例

$(window).resize(function () {
    if ($(window).width() < 400) {
        $(".treatmentDetails").each(function () {
            $(this).prepend($(this).prev(".test").find('.treatmentCost'));
        });
    } else {
        $(".test").each(function () {
            $(this).append($(this).next(".treatmentDetails").find('.treatmentCost'));
        });
    }
});
于 2013-08-20T17:55:02.060 に答える
0 
if ($(window).width() < 400) {
    $(".treatmentDetails").each(function() {
        $(this).prepend($(this).prev(".test").find(".treatmentCost"));
    });
}
于 2013-08-20T17:17:06.993 に答える
0 
if ($(window).width() < 400) {
   for(var i=0 ; i<$(".treatmentDetails").length; i++) 
    $(".treatmentDetails").eq(i).prepend( $(".treatmentCost").eq(i) );
}

これを試して 。あなたが尋ねたようにこれがうまくいくことを願っています！

http://jsfiddle.net/fzMHq/4/

于 2013-08-20T17:19:57.487 に答える