www.webdeveloper.com
Results 1 to 5 of 5

Thread: Organizing elements into a container element according to class

Hybrid View

  1. #1
    Join Date
    Jan 2007
    Posts
    12

    Organizing elements into a container element according to class

    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

  2. #2
    Join Date
    Jan 2007
    Posts
    12
    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>

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    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
    Last edited by 007Julien; 09-21-2011 at 07:01 AM. Reason: complement

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Caution, 007Julien, with cloneNode(). This method does not clone everything. For instance it does not clone the events, nor the event handlers, if any.

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    Thanks, Kor, for the information about this method and the events !

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles