从高到低排序项目

Question

Objective

我有一个点击功能，可以在点击时显示英语、数学、科学和社会研究的分数。我希望从最高到最低排序 .school 在该主题中百分比最高的。

我想知道最好的方法是什么 .sort() 或 isotope.js

scripts.js

$(".btn").click(function(){
            $(".btn").removeClass("is-selected");
            $(this).addClass("is-selected");

                // Button behavior
                if ($(this).hasClass("btn-english")) {
                    $(".school__percentage").each(function(i, element) {
                        $(element).html(schools[i].percentEnglish);
                    });
                } else if ($(this).hasClass("btn-math")) {
                    $(".school__percentage").each(function(i, element) {
                        $(element).html(schools[i].percentMath);
                    });
                } else if ($(this).hasClass("btn-science")) {
                    $(".school__percentage").each(function(i, element) {
                        $(element).html(schools[i].percentScience);
                    });
                } else if ($(this).hasClass("btn-social")) {
                    $(".school__percentage").each(function(i, element) {
                        $(element).html(schools[i].percentSocial);
                    });
                }
            });

schools.js（有20所学校）

var schools = [
  {
    "name": "Maplewood Richmond Heights",
    "district": "Maplewood Richmond Heights",
    "crest": "src/img/crest-affton.jpg",
    "location": "",
    "percentEnglish": "1%",
    "percentMath": "21%",
    "percentScience": "41%",
    "percentSocial": "61%"
  }

index.html

<div class="widget high-school">
        <div class="widget__info">
            <p class="widget__category">High school</p>
            <p class="widget__title">Missouri Assessment Program standouts</p>
        </div>

        <div class="widget__buttons">
            <p class="widget__rank">Rank by:</p>
            <button class="btn btn-english is-selected">English</button>
            <button class="btn btn-math">Math</button>
            <button class="btn btn-science">Science</button>
            <button class="btn btn-social">Social Studies</button>
        </div>

        <div class="wrapper">
            <div class="schools">
                <div class="school" data-id="1">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="2">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="3">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="4">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="5">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="6">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="7">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="8">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="9">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="10">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="11">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="12">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="13">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="14">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="15">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="16">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="17">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="18">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="19">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->

                <div class="school" data-id="20">
                    <img src="" class="school__image">
                    <div class="school__details">
                        <div class="school__name">tk-name</div>
                        <div class="school__district">tk-district</div>
                    </div>
                    <div class="school__percentage">-%</div>
                </div> <!-- school -->
            </div><!-- schools -->
        </div>

Answer 1

这应该可以解决您的问题。如果您有任何问题，请告诉我！

var schools = [{
  "name": "School 1",
  "district": "Maplewood Richmond Heights",
  "crest": "src/img/crest-affton.jpg",
  "location": "",
  "percentEnglish": "1%",
  "percentMath": "21%",
  "percentScience": "41%",
  "percentSocial": "61%"
}, {
  "name": "School 2",
  "district": "Maplewood Richmond Heights",
  "crest": "src/img/crest-affton.jpg",
  "location": "",
  "percentEnglish": "61%",
  "percentMath": "11%",
  "percentScience": "31%",
  "percentSocial": "81%"
}, {
  "name": "School 3",
  "district": "Maplewood Richmond Heights",
  "crest": "src/img/crest-affton.jpg",
  "location": "",
  "percentEnglish": "13%",
  "percentMath": "28%",
  "percentScience": "49%",
  "percentSocial": "55%"
}, ];

function sortBySubject(schools, subject, descending) {
  descending = descending || false;
  if (!schools || !subject) {
    var orderedSchools = [];
    return orderedSchools;
  }
  var orderedSchools = schools.slice().sort(function(elem1, elem2) {
    var value1 = Number(elem1["percent" + subject].replace(/[^\d.]/g, "")),
      value2 = Number(elem2["percent" + subject].replace(/[^\d.]/g, ""));
    if (descending) {
      // descending
      return value1 === value2 ? 0 : +(value1 < value2) || -1;
    }
    // ascending
    return value1 === value2 ? 0 : +(value1 > value2) || -1;
  });
  return orderedSchools;
}

console.log(sortBySubject(schools, "English", true));

编辑 - 添加了 DOM 功能

$(function() {
  var schools = [{
    "name": "School 1",
    "district": "Maplewood Richmond Heights",
    "crest": "src/img/crest-affton.jpg",
    "location": "",
    "percentEnglish": "1%",
    "percentMath": "21%",
    "percentScience": "41%",
    "percentSocial": "61%"
  }, {
    "name": "School 2",
    "district": "Maplewood Richmond Heights",
    "crest": "src/img/crest-affton.jpg",
    "location": "",
    "percentEnglish": "61%",
    "percentMath": "11%",
    "percentScience": "31%",
    "percentSocial": "81%"
  }, {
    "name": "School 3",
    "district": "Maplewood Richmond Heights",
    "crest": "src/img/crest-affton.jpg",
    "location": "",
    "percentEnglish": "13%",
    "percentMath": "28%",
    "percentScience": "49%",
    "percentSocial": "55%"
  }, ];

  function sortBySubject(schools, subject, descending) {
    descending = descending || false;
    if (!schools || !subject) {
      var orderedSchools = [];
      return orderedSchools;
    }
    var orderedSchools = schools.slice().sort(function(elem1, elem2) {
      var value1 = Number(elem1["percent" + subject].replace(/[^\d.]/g, "")),
        value2 = Number(elem2["percent" + subject].replace(/[^\d.]/g, ""));
      if (descending) {
        // descending
        return value1 === value2 ? 0 : +(value1 < value2) || -1;
      }
      // ascending
      return value1 === value2 ? 0 : +(value1 > value2) || -1;
    });
    return orderedSchools;
  }

  $(".widget__buttons button").on("click", function() {
    var subject = $(this).text();
    var orderedSchools = [];
    switch (subject) {
      case "Social Studies":
        {
          subject = "Social";
          break;
        }
    }
    orderedSchools = sortBySubject(schools, subject, true);
    $(".schools").empty();
    orderedSchools.forEach(function(elem, index) {
      var $school = $(".school.clone").clone(true);
      $school.removeClass("clone");
      $school.attr("data-id", (index + 1));
      $school.find(".school__image").attr("src", elem.crest);
      $school.find(".school__name").text(elem.name);
      $school.find(".school__district").text(elem.district);
      $school.find(".school__percentage").text(elem["percent" + subject]);
      $(".schools").append($school);
    });
  });
});

.clone {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="school clone" data-id="1">
  <img src="" class="school__image">
  <div class="school__details">
    <div class="school__name">tk-name</div>
    <div class="school__district">tk-district</div>
  </div>
  <div class="school__percentage">-%</div>
</div>
<!-- school -->
<div class="widget__buttons">
  <p class="widget__rank">Rank by:</p>
  <button class="btn btn-english is-selected">English</button>
  <button class="btn btn-math">Math</button>
  <button class="btn btn-science">Science</button>
  <button class="btn btn-social">Social Studies</button>
</div>
<div class="wrapper">
  <div class="schools">

  </div>
  <!-- schools -->
</div>

Answer 2

这应该有效：

$(".btn").click(function(){                                                                              
      $(".btn").removeClass("is-selected");                                                                  
      $(this).addClass("is-selected");                                        
      var clazz = $(this).attr("class").split(" ")[1];                                                       

      var percent;                                                                                           
      switch(clazz) {                                                                                        
        case "btn-english" :                                                                                 
          percent = "percentEnglish";                                                                        
          break;                                                                                             
        case "btn-math" :                                                                                    
          percent = "percentMath";                                                                           
          break;                                                                                             
        case "btn-science" :                                                                                 
          percent = "percentScience"                                                                         
          break;                                                                                             
        case "btn-social" :                                                                                  
          percent = "percentSocial";                                                                          
          break;                                                                                             

      }                                                                                                      
      schools.sort(function(a, b) {                                                                          
        return a[percent] < b[percent];                                                                      
      });                                                                                                    

      $.each($(".school__percentage"), function(i, element) {                                                
        $(element).html(schools[i][percent]);                                                                
      });

从高到低排序项目

Sorting items from highest to lowest

javascript

jquery

sorting

jquery-isotope

Objective

scripts.js

schools.js（有20所学校）

编辑 - 添加了 DOM 功能