Как разделить отдельные элементы в строках по классам и, если есть элемент с другим классом, добавить в новую строку

Question

Заголовок объяснил большую часть этого, у меня на данный момент есть строка из 4 столбцов с несколькими элементами в ней. Элементы имеют либо имя класса no-media, либо has-media. Все они находятся в одной строке, но я бы хотел разделить их строкой для указанных классов c.

Теперь это выглядит так:

<div class="body-content">
 <div class="items-wrapper">
  <div class="item has-media"> 
  <div class="item has-media">
  <div class="item has-media">
  <div class="item no-media">
  <div class="item no-media">
 </div>
</div>

Что я ' Я хотел бы добиться вот что:

<div class="body-content">
 <div class="items-wrapper">

  <div class="item has-media"> 
  <div class="item has-media">
  <div class="item has-media">

 </div>

 <div class="items-wrapper">

  <div class="item no-media">
  <div class="item no-media">

 </div>
</div>

И так как это сделано с Wordpress, я думал сделать это с jQuery .. но я не совсем уверен, возможно ли это.

Answer 1

    var items = new Array();
    $.each($('.body-content .no-media'), function( index, value ) {
      items.push(value);
      value.remove();
    });

    $('.body-content').append('<div class="items-wrapper new">');
    $.each(items, function( index, value ) {
      $('.new').append(value)
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body-content">
 <div class="items-wrapper">
 <div class="item no-media">a No media</div>
  <div class="item no-media">b No media</div>
  <div class="item has-media"> a has-media</div>
  <div class="item has-media">b has-media</div>
  <div class="item has-media">c has-media</div> 
 </div>
</div>