I have the following html
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
<div class="info">Text</div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
</div>
I try jquery to move "info" class, which has the previous class "swatch-option selected", at the end of the closing div class "options"
So my final html should be like
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
<div class="info">Text</div>
</div>
The jquery I tried is the following but it does not move the info class, which has the previous class swatch-option selected
<script>
require([
'jquery'
], function ($) {
$(document).ready(function(){
$('.selected.info').appendTo('.options');
})
})
</script>
$('.selected.info') means to search for an element that has both selected and info classes but they are siblings in your example.
You can use the adjacent sibling selector (+)
$(document).ready(function() {
$('.selected + .info').appendTo('.options');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
<div class="info">Text</div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
</div>