javascript - 如何使用 javascript 按编号类对 div 进行排序？

Question

<pre>
    <div>
      <div class="abc grid-row">
        <div class="grid-cell position_2">
            <img src="#">
        </div>
        <div class="grid-cell position_1">
            <img src="#">
        </div>
      </div>
      <div class="abc grid-row">
        <div class="grid-cell position_2">
            <img src="#">
        </div>
        <div class="grid-cell position_3">
            <img src="#">
        </div>
        <div class="grid-cell position_1">
            <img src="#">
        </div>
      </div>
      <div class="def grid-row">
        <div class="grid-cell position_2">
            <img src="#">
        </div>
        <div class="grid-cell position_1">
            <img src="#">
        </div>
      </div>
    </div>
</pre>

我想遍历每个网格行以按位置类按数字顺序对子 div 进行排序。因此，position_1 始终是每个网格行中的第一个子 div。

当我尝试使用 jQuery 执行此操作时，子 div 被排序到其他行中，这是我需要阻止的。我怎样才能实现这个目标？

Answer 1

在每个grid-row内的grid-cell上使用sort

$('.grid-row').each(function() {
  var cells = $('.grid-cell', this).sort(function(a, b) {
    return parseInt(a.className.match(/[0-9]+/)[0]) > parseInt(b.className.match(/[0-9]+/)[0]);
  });
  $(this).html(cells);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div class="abc grid-row">
    <div class="grid-cell position_2">
      2
    </div>
    <div class="grid-cell position_1">
      1
    </div>
  </div>
  <div class="abc grid-row">
    <div class="grid-cell position_2">
      2
    </div>
    <div class="grid-cell position_3">
      3
    </div>
    <div class="grid-cell position_1">
      1
    </div>
  </div>
  <div class="def grid-row">
    <div class="grid-cell position_2">
      2
    </div>
    <div class="grid-cell position_1">
      1
    </div>
  </div>
</div>