Organizing elements into a container element according to class

JavaScript
1

Hola,

I have a problem where I have a number of random set of elements that have a fixed rule for class name. I want to move them to a container element according to this class name.

So for example the site generates

<p class="dog-1"></p>
<p class="dog-2"></p>
<p class="cat-1"></p>
<p class="dog-3"></p>

My output would be ideally

<div class="dog">
   <p class="dog-1"></p>
   <p class="dog-2"></p>
   <p class="dog-3"></p>
</div>

<div class="cat">
   <p class="cat-1"></p>
</div>

When searching for a solution, all I could find was simple ordering of elements according to class…
Thanks

2

Probably could be written much better:

<p class="dog-1"></p>
<p class="dog-2"></p>
<p class="cat-1"></p>
<p class="dog-3"></p>

<div class="dog"></div>
<div class="cat"></div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		$('p[class*="dog"]').each(function() {
			$('.dog').append($(this));
		});			
		$('p[class*="cat"]').each(function() {
			$('.cat').append($(this));
		});			

	});
</script>
3

wow, just what I needed… thanks a lot!