Organizing elements into a container element according to class

**poisonborz** · 09-20-2011 04:52 PM

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
Code:

Code:

<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
Code:

Code:

<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

**poisonborz** · 09-21-2011 06:02 AM

In case anyone is interested, someone posted a pretty simple answer elsewhere:

Code:

<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>

**007Julien** · 09-21-2011 06:51 AM

Whit DOM manipulation and without knowing the classes

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Untitled</title>
<style type="text/css">
div {width:140px;padding:10px;border:1px solid red;}
.sub {width:120px;}
p {margin:0;padding:0;border:1px solid yellow;}
</style>
</head>
<body id="bdy">
<div id="allCls">
	<p class="dog-1">dog-1</p>
	<p class="rabbit-3">rabbit-3</p>
	<p class="dog-2">dog-2</p>
	<p class="cat-1">cat-1</p>
	<p class="dog-3">dog-3</p>
	<p class="rabbit-1">rabbit-1</p>
	<p class="rabbit-2">rabbit-2</p>
</div>
<script type="text/javascript">
var i,elm=document.getElementsByTagName('p');
var tab=[],clt={}
for (i=0;i<elm.length;i++) {
	tab[tab.length]=elm[i].className;
	clt[elm[i].className]=elm[i];
}
	tab.sort();
var cntCls=document.createElement('div');
	cntCls.id="srtCls";
var oldCls=newCls='',subCnt,newPrg;
for (i=0;i<tab.length;i++){
	newCls=tab[i].replace(/\-\d+/,'');
	if (newCls!=oldCls) {
		if (oldCls!='') {cntCls.appendChild(subCnt);}
		subCnt=document.createElement('div');
		subCnt.id=newCls;
		subCnt.className="sub";}
	newPrg=clt[tab[i]].cloneNode(true);
	subCnt.appendChild(newPrg);
	oldCls=newCls;
}
cntCls.appendChild(subCnt);
document.getElementById('bdy').appendChild(cntCls);
</script>
</body>
</html>

Edit : Add an alert(document.getElementById('srtCls').innerHTML) at the last line

**Kor** · 09-21-2011 07:01 AM

Caution, 007Julien, with cloneNode(). This method does not clone everything. For instance it does not clone the events, nor the event handlers, if any.

**007Julien** · 09-21-2011 07:16 AM

Thanks, Kor, for the information about this method and the events !

Thread: Organizing elements into a container element according to class

Thread Tools

Display

Organizing elements into a container element according to class

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions