SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sort div order alphabetically based on contents.

    Sort div order alphabetically based on contents.

    Hi all

    I have a simple page here to explain my question.

    http://www.ttmt.org.uk/sort/

    It's a group of divs that each have a letter.

    Is it possible to rearrange the div's so they are alphabetically in order - A,B,C,D

    I haven't attempted any code yet but is posible to add a reference to the div's into an array and then order the array based on the letter in the div - that sounds crazy but i can't think of any other way of doing this.

    Thanks in advane for any help.


    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    	<head>	
    		<meta charset="UTF-8">
      
    		<!--jQuery-->
    		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
      
    		<!--css-->
    		<link rel="stylesheet" href="css/styles.css" />
      
    		<style type="text/css">
          body{
            background: #eee;
            font-family: sans-serif;
          }
          
          .box{
            background: red;
            height: 200px;
            width: 200px;
          }
          .box h1{
            color: white;
            font-size: 3.5em;
            text-align: center;
          }
          
    		</style>
        
    		<title>Title of the document</title>
    	</head>
      
    <body>
      
      <div class="wrap">
        
        <div class="box one">
          <h1>B<h1>
        </div>
        
        <div class="box two">
          <h1>A<h1>
        </div>
        
        <div class="box three">
          <h1>D<h1>
        </div>
        
        <div class="box four">
          <h1>C<h1>
        </div>
          
      </div>  
    
    	<script>
    	  
    	  $(function(){
    	    
    	    var order = [];
    	    
    	    
    	    
    	  })
    	
    	</script>
    </body>
    
    </html>

  2. #2
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK so I've got a bit further but I'm struck again.

    http://www.ttmt.org.uk/sort-1/

    http://jsfiddle.net/EL6Zr/

    I've got it working alphabetically so the div are reordered in the correct order - A,B,C,D

    My problem now is I want to also reordred the div numerically, the div with the highest number at the top

    I have a separate button to reorder by number and I used the same type of functions as the alphabetically reordering.

    Can anyone see why the reordering by number doesn't work.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    	<head>	
    		<meta charset="UTF-8">
      
    		<!--jQuery-->
    		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
      
    		<!--css-->
      
    		<style type="text/css">
          body{
            background: #eee;
            font-family: sans-serif;
          }
          
          .box{
            background: red;
            height: 200px;
            width: 200px;
          }
          .box h1{
            color: white;
            font-size: 3.5em;
            text-align: center;
          }
          
          .box h2{
            color: black;
            font-size: 2.5em;
            text-align: center;
          }
    		</style>
        
    		<title>Title of the document</title>
    	</head>
      
    <body>
      
      <div class="wrap">
        
        <button id="alphBnt">Alphabetical</button>
        
        <button id="numBnt">Numerical</button>
        
        <div class="box one">
          <h1>B<h1>
          <h2>10.35</h2>  
        </div>
        
        <div class="box two">
          <h1>A<h1>
          <h2>100.05</h2>
        </div>
        
        <div class="box three">
          <h1>D<h1>
          <h2>200</h2>  
        </div>
        
        <div class="box four">
          <h1>C<h1>
          <h2>5,510.25</h2>
        </div>
          
      </div>  
    
    	<script>
    	  
    	  $(function(){
    	    
    	    var alpha = [];
    	    var number = [];
    	    
    	    $('.box').each(function(){
    	      
    	      var alphaArr = [];
    	      var numArr = [];
    	      
    	      alphaArr.push($('h1', this).text());
    	      alphaArr.push($(this));
    	      alpha.push(alphaArr);
    	      alpha.sort();
    	      
    	      numArr.push($('h2', this).text());
    	      numArr.push($(this));
    	      number.push(numArr);
    	      number.sort(function(a,b){
    	        return a-b
    	      });
    	    })
    	    
    	    $('#alphBnt').on('click', function(){
    	      $('.box').remove();
    	      for(var i=0; i<alpha.length; i++){
    	        $('.wrap').append(alpha[i][1]);
    	      }
    	    })
    	    
    	    $('#numBnt').on('click', function(){
    	      $('.box').remove();
    	      for(var i=0; i<number.length; i++){
    	        $('.wrap').append(number[i][1]);
    	      }
    	    })
    	    
    	  })
    	
    	</script>
    </body>
    
    </html>

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    You don't need to create so many arrays. You can just get a reference to all of the divs you want to sort, then use JavaScript's native .sort() function.
    https://developer.mozilla.org/en/doc...cts/Array/sort

    Code:
    var $divs = $("div.box");
    
    $('#alphBnt').on('click', function(){
        var alphabeticallyOrderedDivs = $divs.sort(function(a,b){
            return $(a).find("h1").text() > $(b).find("h1").text();
        });
        $("#container").html(alphabeticallyOrderedDivs);
    });
    	    
    $('#numBnt').on('click', function(){
        var numericallyOrderedDivs = $divs.sort(function(a,b){
            return $(a).find("h2").text() > $(b).find("h2").text();
        });
        $("#container").html(numericallyOrderedDivs);
    });
    fiddle

  4. #4
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo, your way is obviously a lot better than mine.

    I think I understand whats going on here but could you give a quick explanation of how this works.

    How does this sort the returning divs?

    Code:
    var alphabeticallyOrderedDivs = $divs.sort(function(a,b){
            return $(a).find("h1").text() > $(b).find("h1").text();
        });

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Sure.
    You are passing sort() a callback.
    This callback is called many times over for your array, where a is the current item and b is the next item.
    The callback compares both items and returns 0 if the two elements are equal, a negative number if a should be before b and a positive number if b should be before a.
    Based on the return value it orders the items in the array correspondingly.

    To sort the array in reverse order, you could do:

    Code:
    return $(a).find("h1").text() < $(b).find("h1").text();
    instead of:

    Code:
    return $(a).find("h1").text() > $(b).find("h1").text();
    You can use console.log to peek under the hood:

    Code:
    var myArray=[25, 8, 7, 41, 8, 99, 2, 55], 
        i = 1;
    
    myArray.sort(function(a,b){
        console.log("Iteration " + i);
        console.log("Array: " + myArray);
        console.log("Comparing " + a + " with " + b);
        console.log(a > b? a + " is greater" : b > a? b + " is greater" : "Elements are the same"); 
        console.log("\n");
        i++;
        return b - a;
    });
    Does that help?

  6. #6
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo, that makes more sense now

  7. #7
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pullo, THIS makes more sense now but I'm sure the next thing will stump me.

    Can you recommend any books, references, tutorials to get better at Javascript.

    I'm sure I've read everything but maybe I'm reading the wrong things.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Sure.
    It depends a bit on what works for you, but I would recommend this: https://learnable.com/books/jump-start-javascript
    Then this: http://eloquentjavascript.net/

    I would also recommend that you hang around the JS forum and try to answer questions here.
    It is really an excellent way to learn, as well as to cement your own knowledge.


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
  •