SO - 30026962

by Arun P Johny

HTML

<button class="langButton" id="sblood" data-language="ethnicity">ethnicity</button>
<button class="langButton" id="sgroup" data-language="gender">gender</button>
<button class="langButton" id="scanon" data-language="pet">pet</button>
<button class="langButton" id="sability" data-language="subject">subject</button>
<br>
<br>
<br>
<div id="sortThis">
    <div class="person">John
        <div class="article ethnicity">chinese</div>
        <div class="article gender">male</div>
        <div class="article pet">duck</div>
        <div class="article subject">history</div>
    </div>
    <div class="person">Lucy
        <div class="article ethnicity">indian</div>
        <div class="article gender">female</div>
        <div class="article pet">dog</div>
        <div class="article subject">maths</div>
    </div>
    <div class="person">David
        <div class="article ethnicity">irish</div>
        <div class="article gender">male</div>
        <div class="article pet">chicken</div>
        <div class="article subject">english</div>
    </div>
    <div class="person">Tony
        <div class="article ethnicity">scottish</div>
        <div class="article gender">male</div>
        <div class="article pet">hamster</div>
        <div class="article subject">geography</div>
    </div>
    <div class="person">Kim
        <div class="article ethnicity">romanian</div>
        <div class="article gender">female</div>
        <div class="article pet">fish</div>
        <div class="article subject">chemistry</div>
    </div>
    <div class="person">Mary
        <div class="article ethnicity">turkish</div>
        <div class="article gender">female</div>
        <div class="article pet">none</div>
        <div class="article subject">maths</div>
    </div>
    <div class="person">Jane
        <div class="article ethnicity">japanese</div>
        <div class="article gender">female</div>
        <div class="article pet">cat</div>
        <div class="article subject">biology</div>
...

CSS

.person {
      width:150px;
      padding:10px;
      margin:0 0 10px 10px;
      background:#fff;
      border:1px solid #000;
  }
  .person div {
      border-top:1px solid #aaa;
  }

JavaScript

$(function () {
    var $articles = $('.article');
    $(".langButton").click(function () {
        var language = $(this).attr("data-language");
        $articles.hide(); // Hide them all
        $("." + language).show(); // than show the needed ones
    });
    
});


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

$('#sblood').data("sortKey", "div.article.ethnicity");
$('#sgroup').data("sortKey", "div.article.gender");
$('#scanon').data("sortKey", "div.article.pet");
$('#sability').data("sortKey", "div.article.subject");

$("button.langButton").click(function () {
    sortUsingNestedText($('#sortThis'), "div", $(this).data("sortKey"));
});