Sort div by span class

Question

EDIT I have this working in fiddle http://jsfiddle.net/gandjyar/HM67V/ but can't get it working outside of fiddle... ideas?

I have the following code:

<div id="sort">
  <p>Sort Communities By: <a href="#">North</a> | <a href="#">South</a> | <a href="#">East</a> | <a href="#">West</a> | <a href="#">ALL</a>
  </p>
</div>
<div class="fp-floorplans">
  <div id="fp-link">
    <a href="#">Community 1</a>
  </div>
  <div id="wpcf-field-location" class="wpcf-field-checkboxes wpcf-field-location">
    <span class="wpcf-field-name wpcf-field-checkboxes wpcf-field-location-name">Loation:</span>
    <span class="wpcf-field-value wpcf-field-checkboxes-value wpcf-field-location-value">South</span>
  </div>
  <div id="wpcf-field-schools" class="wpcf-field-textfield wpcf-field-schools">
    <span class="wpcf-field-name wpcf-field-textfield wpcf-field-schools-name">School(s):</span> 
    <span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-schools-value">Southwest</span>
  </div>
  <div id="wpcf-field-price-starting-at" class="wpcf-field-textfield wpcf-field-price-starting-at">
    <span class="wpcf-field-name wpcf-field-textfield wpcf-field-price-starting-at-name">Price Starting At:</span>
    <span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-price-starting-at-value">$100's</span>
  </div>
</div>
<div class="fp-floorplans">
  <div id="fp-link">
    <a href="#">Community 2</a>
  </div>
  <div id="wpcf-field-location" class="wpcf-field-checkboxes wpcf-field-location">
    <span class="wpcf-field-name wpcf-field-checkboxes wpcf-field-location-name">Loation:</span>
    <span class="wpcf-field-value wpcf-field-checkboxes-value wpcf-field-location-value">East</span>
  </div>
  <div id="wpcf-field-schools" class="wpcf-field-textfield wpcf-field-schools">
    <span class="wpcf-field-name wpcf-field-textfield wpcf-field-schools-name">School(s):</span>
    <span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-schools-value">Southeast</span>
  </div>
  <div id="wpcf-field-price-starting-at" class="wpcf-field-textfield wpcf-field-price-starting-at">
    <span class="wpcf-field-name wpcf-field-textfield wpcf-field-price-starting-at-name">Price Starting At:</span>
    <span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-price-starting-at-value">$100's</span>
  </div>
</div>

and I want to be able to sort by North, South, East, West for the 'wpcf-field-location-value' or just ascending for the 'wpcf-field-schools-value'.

I've tried implementing some suggestions that I've found but none have worked. ( Jquery - sort DIV's by innerHTML of children and Sorting divs by number inside div tag and jQuery )

Answer 1

First: you can't have same id values in your html. You can add a user attribute by giving it data-id. An id property value must be unique for the whole document.

Since North,South,East,West are not alphabetically ordered you need to replace them with another value.

Using the code provided here (with some edits): Jquery - sort DIV's by innerHTML of children

var direction={north:0,south:1,east:2,west:3}
function sortOn(primary){
  primary=primary.toLowerCase();
  for(item in direction){
    if(direction[item]===0){
      break;
    }
  }
  var tmp=direction[primary];
  direction[primary]=0;
  direction[item]=tmp;
    var items = $(".fp-floorplans").sort(function(a, b) {
        var vA = $(a).find("wpcf-field-location-value").text().trim().toLowerCase();
        var vB = $(b).find("wpcf-field-location-value").text().trim().toLowerCase();
        if(directions[vA]===directions[vB]){
          //secondary search
          vA = $(a).find("wpcf-field-schools-value").text().trim().toLowerCase();
          vB = $(b).find("wpcf-field-schools-value").text().trim().toLowerCase();
          return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
        }
        // primary searh (a and b cannot be the same)
        return (vA < vB) ? -1 : 1;
    });
}

sortOn("west");

To change the priority of the order (like west first) you can change the directions variable before sorting: direction={north:3,south:1,east:2,west:0}

Fist you need to see what value currently holds the 0 and then replace it with the new on.