Search code examples
jqueryclonechildren

Cloning subclasses of class into class

I have following html markup.

<div class="master">
  <div class="item master-line"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item master-line"></div>
  <div class="item"></div>
</div>

I need to clone the items children/sub of the master-line into the master-line class.

What I have tried, but does not work. And I am not sure it might be the best method:

$.each($('.item'), function(index, value){
        if($(value).hasClass('master-line')){    
         console.log($(value).next().find('.component_table_item'));
        }
    });

Unfortunately it is not possible to change the html markup (which would be preferable).

The end markup should look something like this:

<div class="master">
  <div class="item master-line">
   <div class="item"></div>
   <div class="item"></div>
  </div>
  <div class="item master-line">
   <div class="item"></div>
  </div>
</div>

https://jsfiddle.net/tLhqkjoh/

Solution

  • Use the following code:

    $.each($('.item.master-line'), function(index, value) {
  $(this).nextUntil(".master-line").appendTo($(this));
});

    demo

    $.each($('.item.master-line'), function(index, value) {
  $(this).nextUntil(".master-line").appendTo($(this));
});

console.log($(".master").html().trim());
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="master">
  <div class="item master-line"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item master-line"></div>
  <div class="item"></div>
</div>