如何使用 jQuery 对多个表进行排序

Question

我想对所有值进行排序，但 jquery 只对三个值进行排序我想对标签 h2 进行多个 table 排序，但是当我对它进行排序时，它只对前 3 个值进行排序，但我想要所有值

$('#alphBnt').on('click', function() {
  var sorting = $(".box").sort(function(a, b) {
    return $(a).find("h2").text() > $(b).find("h2").text();
  });

  $("#container").html(sorting)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>
<div id="container">
  <table border=2px class="box">

    <tr>
      <td class="name">
        <h1>mui</h1>
      </td>
      <td class="number">
        <h2>4512</h2>
      </td>
    </tr>
  </table>
  <table border=2px class="box">

    <tr>
      <td class="name">
        <h1>oinecellars</h1>
      </td>
      <td class="number">
        <h2>566</h2>
      </td>
    </tr>
  </table>
  <table border=2px class="box">

    <tr>
      <td class="name">
        <h1>zacchus </h1>
      </td>
      <td class="number">
        <h2>34566</h2>
      </td>
    </tr>
  </table>
  <table border=2px class="box">

    <tr>
      <td class="name">
        <h1>zacchus </h1>
      </td>
      <td class="number">
        <h2>1</h2>
      </td>
    </tr>
  </table>

  


</div>

Answer 1

您需要使用 - :

$('#alphBnt').on('click', function() {
  var sorting = $(".box").sort((a, b) => $(a).find("h2").text() - $(b).find("h2").text()).appendTo("#container")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p><button id="alphBnt">Sort</button></p>
<div id="container">
  <table border=2px class="box">

    <tr>
      <td class="name">
        <h1>mui</h1>
      </td>
      <td class="number">
        <h2>4512</h2>
      </td>
    </tr>
  </table>
  <table border=2px class="box">

    <tr>
      <td class="name">
        <h1>oinecellars</h1>
      </td>
      <td class="number">
        <h2>566</h2>
      </td>
    </tr>
  </table>
  <table border=2px class="box">

    <tr>
      <td class="name">
        <h1>zacchus </h1>
      </td>
      <td class="number">
        <h2>34566</h2>
      </td>
    </tr>
  </table>
  <table border=2px class="box">

    <tr>
      <td class="name">
        <h1>zacchus </h1>
      </td>
      <td class="number">
        <h2>1</h2>
      </td>
    </tr>
  </table>



</div>

如何使用 jQuery 对多个表进行排序

How to sort multiple tables with jQuery

html

javascript

css

jquery

encoding