javascript - Sorting and Grouping of Cards in Jquery/Css3 with smooth transition -


help me out!!!! have complex requirement have group of cards, on click have sort same group of cards in asc order. , once have made group cards, each time click sort button, sort cards within group again.

requirement 

 <div class="main_div">       <div class="connectedgroup">         <div class="deck">4</div>         <div class="club">3</div>         <div class="deck">2</div>         <div class="spade">9</div>         <div class="deck">5</div>         <div class="club">7</div>         <div class="deck">5</div>         <div class="spade">2</div>         <div class="club">9</div>       </div>     </div>

out put after sort 

  <div class="main_div">       <div class="connectedgroup">         <div class="deck">2</div>         <div class="deck">4</div>         <div class="deck">5</div>       </div>       <div class="connectedgroup">         <div class="spade">2</div>         <div class="spade">9</div>       </div>       <div class="connectedgroup">         <div class="club">3</div>         <div class="club">7</div>         <div class="club">9</div>       </div>     </div>

waiting valuable suggestions

i wrote down jquery script solve problem,

$("a#order").on("click", function(){     var wrapper = $(".main_div");     var items = $(".connectedgroup div");     var itemshash = {};     wrapper.find("div").remove();      $.each(items, function(){         var itemkind = $(this).attr("class");          if(itemshash[itemkind] == undefined) {             itemshash[itemkind] = [];         }         itemshash[itemkind].push($(this).text());      });      $.each(itemshash, function(item, value){         var sortedlist = itemshash[item].sort();         var cluster = "<div class='connectedgroup'>";          $.each(sortedlist, function(si, va){             cluster += "<div class='"+item+"'>"+ va +"</div>";         });          cluster += "</div>";         wrapper.append(cluster);     }); });

you should check http://jsfiddle.net/5rmc8/1/

if using jquery, may out.

you can change "each" statements usual "for" loops, faster.

what did iterate on dom elements , retrieve hash of "kind" (deck, club, spade, etc) array of values , sorted them ascendingly "sort()"

example: hash["deck"] = [2, 4, 5];

then iterate on new hash , create elements needed can seen on line 18 of given example.

hope have helped you


Comments

Post a Comment

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

i seeing strange behavior cryptstringtobinary cryptography api. please see below code (config: x64 debug): #include "stdafx.h" #include <windows.h> #include <strsafe.h> #include <iostream> #include <exception> void main() { dword dwskip; dword dwflags; dword dwdatalen; //lpcwstr pszinput = l"jaaaaaecaaadzgaaakqaagdnnl1l56bwgfjdgr3rpxtqqqn6daw3usv2emkjym4t"; //this works fine lpcwstr pszinput = l"mytest"; //doesnt work, api returns false,error code 0x0000000d // determine size of byte array , allocate memory. if(! cryptstringtobinary( pszinput, _tcslen( pszinput ) + 1, crypt_string_base64, null, &dwdatalen, &dwskip, &dwflags ) ) { dword dw = getlasterror(); //0x0000000d: data invalid throw std::exception( "error computing byte length." ); } byte *pbytebyte = null; try { ...
Read more

java.util.scanner - How to read and add only numbers to array from a text file -

i'm learning java , have question regarding reading file want read numbers file contains strings well. here example of file: 66.56 "3 java 3-43 5-42 2.1 1 and here coding: public class test { public static void main (string [] args){ if (0 < args.length) { file x = new file(args[0]); try{ scanner in = new scanner( new fileinputstream(x)); arraylist<double> test = new arraylist<>(); while(in.hasnext()){ if(in.hasnextdouble()){ double f=in.nextdouble(); test.add(f);} else {in.next();} } catch(ioexception e) { system.err.println("exception during reading: " + e); } } my problem add 66.56,2.1 , 1 doesn't add 3 after "3 or ignores 3-43 , 5-42 can tell me how skip strings , add doubles here? thanks all said 3 ie; "3, 3-43 , 4-42 strings either u read string , split , check number @ " , - or put in space between characters , integers. jvm after compilation tre...
Read more

iphone - Three second countdown in cocos2d -

i trying have 3 second countdown display when level beat in game. did: -(void) gamesegmentbeat { [self pauseschedulerandactions]; // overlay game opaque background ccsprite *opaquebg = [ccsprite spritewithfile:@"background1.png"]; opaquebg.position = screencenter; [self addchild:opaquebg z:10000]; // these 3 labels 3 seconds cclabelttf *three = [cclabelttf labelwithstring:@"3" fontname:@"helvetica" fontsize:100]; three.position = ccp(screencenter.x, screencenter.y); cclabelttf *two = [cclabelttf labelwithstring:@"2" fontname:@"helvetica" fontsize:100]; two.position = ccp(screencenter.x, screencenter.y); cclabelttf *one = [cclabelttf labelwithstring:@"1" fontname:@"helvetica" fontsize:100]; one.position = ccp(screencenter.x, screencenter.y); // secondspast specified in update method secondspast = 0; if (secondspast == 1) { [self addchild:thr...
Read more