Jquery appendto div class selector-CodePudding

I have the following html

<div >
  <div >
    <div ></div>
    <div >Text</div>
  </div>
  <div >
    <div ></div>
    <div >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 >
  <div >
    <div ></div>
  </div>
  <div >
    <div ></div>
    <div >Text2</div>
  </div>
  <div >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>

CodePudding user response：

$('.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 >
  <div >
    <div ></div>
    <div >Text</div>
  </div>
  <div >
    <div ></div>
    <div >Text2</div>
  </div>
</div>