javascript - jQuery 仅在前一个 div 中添加查询

Question

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

这工作正常，我的问题是我只希望其正上方的 div (.test) 中的 .treatmentCost 在下面的 .treatmentDetails 内移动。

目前，它找到每个 .treatmentCost 并添加到 .treatmentDetails 中

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

我只需要在 .treatmentDetails 之前将 '.test' div 中的 '.treatmentCost' 定向到前面，而不是在所有 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-->

Answer 1

DEMO

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

您可以使用.children('.treatmentCost'));代替.find('.treatmentCost'));

DEMO

如果你想在$(window).resize()中编码

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