jQuery prepend query in only prev div
i want to move .treamentCost within .treatmentDetails when the window is
below < 400px
This works fine, my problem is i only want the .treatmentCost within the
div directly above it (.test) to move within the below .treatmentDetails.
At the moment it finds every .treatmentCost and prepends in to
.treatmentDetails
Please see the below js fiddle to see the issue. If you run the fiddle
with the fiddle results window ABOVE the width of 400px you will see
'£100' and '£200' are outside the grey .treatmentDetails div. When you
drag the browser in and the results window is BELOW a width of 400px and
run the fiddle again, you will see the .treatmentCosts prepend within
.treatmentDetails.
I need only the '.treatmentCost' within the '.test' div directed a before
the .treatmentDetails to prepend not ALL divs with the class of
.treatmentCost as is happening at the moment.
So the successfull end result will be that '£100' will be within the first
gry div and '£200' will be within the second grey div.
http://jsfiddle.net/fzMHq/1/
// CODE //
// 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-->
No comments:
Post a Comment