打開時，顯示課程並按字母順序隱藏其餘部分。

Question

我有一些div元素，我希望能夠根據他們的孩子進行排序。

我尋求的東西，顯示某一類，同時隱藏其餘的，使用jQuery沒有任何插件。我遇到這個Toggle multiple Div names/content by one button click這是非常有用的做到這一點。不過，我也希望排序的元素也按字母順序顯示，具體取決於指定的類。

我試過用這個：Jquery - sort DIV's by innerHTML of children。但是，它似乎沒有工作。任何幫助將非常感激！

這是我到目前爲止：http://jsfiddle.net/y11hr6d8/。

這裏是jQuery的：

$(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) { 
    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); 
} 

$('#sEthnicity').data("sortKey", "span.article ethnicity"); 
$('#sGender').data("sortKey", "span.article gender"); 
$('#sPet').data("sortKey", "span.article pet"); 
$('#sSubject').data("sortKey", "span.article subject"); 

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

Answer 1

你SORTKEY數據值是錯誤的，這些值都在div帶班article和ethnicity，gender，pet或subject。還用於選擇按鈕的ID是錯誤的

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

演示：Fiddle

Answer 2

$(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) { 
     var items = parent.children(childSelector).sort(function(a, b) { 
      var vA = $(a).find("."+keySelector).text(); 
      var vB = $(b).find("."+keySelector).text(); 
      return (vA < vB) ? -1 : (vA > vB) ? 1 : 0; 
     }); 
     parent.append(items); 
    } 


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