SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    <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:
    <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
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Probably could be written much better:

    HTML 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
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, just what I needed... thanks a lot!


Bookmarks

Posting Permissions

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