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)

[Jquery - sort DIV's by innerHTML of children](http://stackoverflow.com/questions/7831712/jquery-sort-divs-by-innerhtml-of-children) answers your question if you're using jQuery. — Aiias, Apr 07 '13 at 23:58
Aiias, I did check that question and have it running in fiddle but am not able to get it running outside of fiddle.. ideas why? — gandjyar, Apr 08 '13 at 00:12
@icktoofay I started out wanting to filter but thought a sort would be easier. — gandjyar, Apr 08 '13 at 00:14

score 1 · Answer 1 · edited May 23 '17 at 12:29

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.

This allows you to sort "north-first" or "west-first", but what if I want to sort them "south-first" as well? — Julian H. Lam, Apr 08 '13 at 00:19
Not sure what you mean. You'd like the secondary search on schools-value to be non alphabetic? — HMR, Apr 08 '13 at 00:21
Ah, I see. The question is to sort on: northeast, northwest, southeast, southwest (secondary sort). But just alpabetically. That is what the script does. If you want the secondary sort to use a replacement for he value to sort on than you should first specify the order you'd like them in. — HMR, Apr 08 '13 at 00:24
Updated the code so it'll sort on whatever parameter you give it (south, west, east, north) — HMR, Apr 08 '13 at 00:47

Sort div by span class

1 Answers1