JSFiddle - React, Tailwind, and code Playground

by gandjyar

HTML

<div id="sortThis">
    <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">Northwest</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...

JavaScript

function sortUsingNestedText(parent, childSelector, keySelector) {
    var items = parent.children(childSelector).sort(function (a, b) {
        var vA = $(keySelector, a).text();
        var vB = $(keySelector, b).text();
        return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
    });
    parent.append(items);
}

/* setup sort attributes */
$('#sPrice').data("sortKey", "span.wpcf-field-location-value");
$('#sStyle').data("sortKey", "span.wpcf-field-schools-value");


/* sort on button click */
$("button.btnSort").click(function () {
    sortUsingNestedText($('#sortThis'), "div", $(this).data("sortKey"));
});