如何根据选项值对包装器 div 中的“大厅”框进行排序（按字母顺序、重新按字母顺序、按容量）？

2024-05-20 • 问答

我正在尝试能够根据选项值对大厅进行排序，默认情况下可以排序（当前有效，只是重新获取数据）、按字母顺序、按字母顺序和按容量排序。我有一些用于按字母顺序排序的 jQuery，我试图让它工作，但它似乎没有这样做。

jQuery/JavaScript 排序函数：

function sortHalls() {
        let sortOption = document.getElementById("sortFilterText").value;
            if (sortOption == "default") {
                document.getElementById("hallWrapper").innerHTML = "";
                fetchData();
            } else if (sortOption == "alphabetically") {

                let alphabeticallyOrdered = $('.hall').sort(function(a,b) {
                    let $aTitle = $(a).find('.hallName'),$bTitle = $(b).find('.title');
                    return String.prototype.localeCompare.call($aTitle.text().toLowerCase(),$bTitle.text().toLowerCase());
                });

                let wrapper = $("#hallWrapper");
                wrapper.detach().empty().append(alphabeticallyOrdered);
                $('body').append(wrapper);
                
            } else if (sortOption == "realphabetically") {

            } else if (sortOption == "capacity") {

            }
}

Hall Div 结构：

`<div class="hall">
      <div class="info">
          <p>${data.Halls[halls[i]].Location[0].Address},${data.Halls[halls[i]].Location[1].Suburb}<br>Capacity: ${data.Halls[halls[i]].Room[0]["Standing Capacity"]}</p> 
      </div>
      <div class="image">
          <img class="img" src="${data.Halls[halls[i]].Description[4].Photos}" alt="${data.Halls[halls[i]]["Hall Name"]}">
      </div>
      <div class="hallNameBox">
          <p class="hallName">${data.Halls[halls[i]]["Hall Name"]}</p>
      </div>
</div>`;

HTML 选择：

<div id="sortFilter" class="flexColumn">
     <label for="sortFilterText">Sort Community Halls</label>
     <select id="sortFilterText" onchange="sortHalls()">
         <option value="default">Default (Newest)</option>
         <option value="alphabetically">Alphabetically</option>
         <option value="realphabetically">Reverse Alphabetically</option>
         <option value="capacity">Capacity (Highest)</option>
     </select>
</div>

您可以将 .hallName 元素相互比较，然后将这些排序后的值附加到包装器元素中。此外，您也可以对 capacity 执行此操作。

演示代码：

function sortHalls(sortOption) {
  if (sortOption == "default") {
    //document.getElementById("hallWrapper").innerHTML = "";
    // fetchData();
  } else if (sortOption == "alphabetically") {
    $(".hall").sort(ascending_sort).appendTo("#hallWrapper");

  } else if (sortOption == "realphabetically") {
    $(".hall").sort(descending_sort).appendTo("#hallWrapper");

  } else if (sortOption == "capacity") {
    $(".hall").sort(capacity_sort).appendTo("#hallWrapper");
  }
}
//sortiing in ascending
function ascending_sort(a,b) {
  return ($(b).find(".hallName").text().toUpperCase()) <
    ($(a).find(".hallName").text().toUpperCase()) ? 1 : -1;
}
//sorting in descending
function descending_sort(a,b) {
  return ($(b).find(".hallName").text().toUpperCase()) >
    ($(a).find(".hallName").text().toUpperCase()) ? 1 : -1;
}
//sorting from high to low capacity
function capacity_sort(a,b) {
  return parseInt($(b).find(".capacity").text()) - parseInt($(a).find(".capacity").text());
}

.hall {
  border: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="sortFilter" class="flexColumn">
  <label for="sortFilterText">Sort Community Halls</label>
  <select id="sortFilterText" onchange="sortHalls(this.value)">
    <option value="default">Default (Newest)</option>
    <option value="alphabetically">Alphabetically</option>
    <option value="realphabetically">Reverse Alphabetically</option>
    <option value="capacity">Capacity (Highest)</option>
  </select>
</div>
<div id="hallWrapper">
  <div class="hall">
    <div class="info">
      <p>Something <br>Capacity: <span class="capacity">4</span></p>
    </div>
    <div class="image">
      <img class="img" src="${data.Halls[halls[i]].Description[4].Photos}" alt="${data.Halls[halls[i]][" Hall Name "]}">
    </div>
    <div class="hallNameBox">
      <p class="hallName">Hello</p>
    </div>
  </div>
  <div class="hall">
    <div class="info">
      <!--added span tag around capacity value -->
      <p>Something9<br>Capacity: <span class="capacity">2</span></p>
    </div>
    <div class="image">
      <img class="img" src="${data.Halls[halls[i]].Description[4].Photos}" alt="${data.Halls[halls[i]][" Hall Name "]}">
    </div>
    <div class="hallNameBox">
      <p class="hallName">Abxy</p>
    </div>
  </div>
  <div class="hall">
    <div class="info">
      <p>Something2<br>Capacity: <span class="capacity">1</span></p>
    </div>
    <div class="image">
      <img class="img" src="${data.Halls[halls[i]].Description[4].Photos}" alt="${data.Halls[halls[i]][" Hall Name "]}">
    </div>
    <div class="hallNameBox">
      <p class="hallName">Abmn</p>
    </div>
  </div>
</div>

如何根据选项值对包装器 div 中的“大厅”框进行排序（按字母顺序、重新按字母顺序、按容量）？

amianmian 回答：如何根据选项值对包装器 div 中的“大厅”框进行排序（按字母顺序、重新按字母顺序、按容量）？

大家都在问