Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I have an array of dynamic php variables that are keys to several div id's. I'm looking for a way to sort the php quantities and use that sequence to re-order my divs. I have found a few threads on how to use jquery to re-order divs based on an array input, but they're all just different enough that with my skill level, I haven't been able to adapt they're suggestions effectively. Here is a thread that is very close to what I'm trying to do. Dynamically arranging divs using jQuery

A clear explanation of my goal: contestants raise money, each has a fundraising page. The php variable is the amount of money they've raised pulled from their page. The function will order the divs on the page to show the top earner first, and so on.

The code below reflects my layout, however I should clarify that my divs all have unique content, so dynamic generation won't work for them.

<?php 

$Contestants = array(
    $Totals[0] => 'contestant0', 
    $Totals[1] => 'contestant1',
    $Totals[2] => 'contestant2'
);

krsort ($Contestants);

?>

<div id="container">
 <div id="contestant0">
  <p><?php print ($Totals[0]) ?></p> 
 </div>
 <div id="contestant1">
  <p><?php print ($Totals[1]) ?></p> 
 </div>
 <div id="contestant2">
  <p><?php print ($Totals[2]) ?></p> 
 </div>
</div>

I know how barebones the code I've given is, but the javascript I've pounded out I believe is pretty useless and at best embarrassing.

Any help is hugely appreciated.

share|improve this question
This is really not a good approach. – Jared Farrish Oct 8 '11 at 2:17
Can you be more specific? – syllables Oct 8 '11 at 5:02
Ideally, you'd sort your contestant array by their donation amounts using a custom sort function ( php.net/manual/en/function.uksort.php ), then output that array with a for() loop. Unless you have a lot of live, user-controlled sorting you want to do on the page, doing this work in PHP is a better choice than in JS. – Doug Avery Oct 8 '11 at 6:28

2 Answers

up vote 1 down vote

No jQuery needed, unless i'm missing something. 

<?php 

$Contestants = array(
    $Totals[0] => 'contestant0', 
    $Totals[1] => 'contestant1',
    $Totals[2] => 'contestant2'
);

rsort ($Contestants);

?>


<div id="container">
<?php foreach( $Contestants as $k => $v ) { ?>  
   <div id="<?php echo $v ?>">
     <p><?php echo $k ?></p> 
    </div>
<?php } ?>
</div>
share|improve this answer
Very cool approach. Unfortunately this only works if all the divs are the same. Each of my Divs has unique content. If used more than once it results in loops. – syllables Oct 8 '11 at 5:00
up vote 0 down vote

Made a quick example over at JSfiddle:

http://jsfiddle.net/2U7fv/4/

It sounds like you need to use a standard JS method, "sort()", which takes a two argument method that compares both arguments, and returns a value of 1 or more if argument B should be sorted before than argument A. http://www.w3schools.com/jsref/jsref_sort.asp

So the process is:

  • Put all your divs in an array
  • Run than array through a sorting method
    • The sorting method:
    • Gets the donation amounts of two divs
    • Parses off the dollar sign
    • Returns 1 or more if B is higher, 0 or less if A is higher
  • This returns a sorted array of DOM nodes
  • Convert that array to one long HTML string
  • Set the #container html to that string
share|improve this answer
In my comment on your original question, I suggest using PHP over JavaScript unless you have a specific reason you're not telling us. However, it's worth noting that PHP's ksort() and JS's sort work in a similar fashion — they both take a two-argument callback that compares the arguments in a way that you specify. – Doug Avery Oct 8 '11 at 6:30
Unless I've misunderstood, I think you guys are taking my metaphorical layout too literally. My example code is just an representation of my div layout and naming system. The real site layout has lots of CSS and html content in each div, including several other divs. If I understand your solution, you went into each div, got the php donation value, stripped off the divs, sorted the values, then printed them as html inside a single div. Thank you for such a thoughtful response, but I do need to maintain the divs, only sort their order on the page. – syllables Oct 8 '11 at 7:47
In this example, I'm reordering the divs based on the donation amount. What do you need them ordered by? In my example, nothing was "stripped" - I loaded all the divs into an array, reordered them by the amount, then re-deposited them onto the page in the same place. – Doug Avery Oct 8 '11 at 7:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.