1

当窗口低于 < 400px 时，我想在 .treatmentDetails 中移动 .treamentCost

这很好用，我的问题是我只希望它正上方的 div 中的 .treatmentCost （.test）在下面的 .treatmentDetails 中移动。

目前它找到每个 .treatmentCost 并预先添加到 .treatmentDetails

请参阅下面的 js fiddle 以查看问题。如果您使用超过 400 像素宽度的小提琴结果窗口运行小提琴，您将看到“100 英镑”和“200 英镑”在灰色的 .treatmentDetails div 之外。当您将浏览器拖入并且结果窗口低于 400 像素的宽度并再次运行小提琴时，您将看到 .treatmentCosts 前置在 .treatmentDetails 中。

我只需要 '.test' div 中的 '.treatmentCost' 指向 .treatmentDetails 之前的 .treatmentDetails 类，而不是像目前正在发生的那样在所有 div 前面添加 .treatmentCost 类。

因此，成功的最终结果将是“100 英镑”将在第一个灰色 div 内，“200 英镑”将在第二个灰色 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 回答