javascript - 按标签对复选框进行排序

Question

所以我有这些带有疯狂 ID 的复选框，因为我无法更改的原因。例如:

<td>
    <span title=BBB class="ms-RadioText">
        <input id = Checkbox1 type=checkbox/>
        <label for="Checkbox1">BBB</label>
    </span>
    <span title=AAA class="ms-RadioText">
        <input id = Checkbox2 type=checkbox/>
        <label for="Checkbox2">AAA</label>
    </span>
</td>

当然，它们不按字母顺序排列。由于我不允许更改 HTML 中复选框的顺序，因此如何使用 native JavaScript、JQuery 或 CSS 按字母顺序对其进行排序？

Answer 1

jQuery排序并读取title属性

$('td').each(function() {
  var td = $(this)
  td.find('span').sort(function(a, b) {
    return a.title.localeCompare(b.title)
  }).appendTo(td)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <span title=BBB class="ms-RadioText">
        <input id="Checkbox1" type="checkbox"/>
        <label for="Checkbox1">BBB</label>
    </span>
      <span title=AAA class="ms-RadioText">
        <input id="Checkbox2" type="checkbox"/>
        <label for="Checkbox2">AAA</label>
    </span>
    </td>
  </tr>
  <tr>
    <td>
      <span title=FFF class="ms-RadioText">
        <input id="Checkbox1b" type="checkbox"/>
        <label for="Checkbox1b">FFF</label>
    </span>
      <span title=ZZZ class="ms-RadioText">
        <input id="Checkbox2b" type="checkbox"/>
        <label for="Checkbox2b">ZZZ</label>
    </span>
      <span title=EEE class="ms-RadioText">
        <input id="Checkbox3b" type="checkbox"/>
        <label for="Checkbox3b">EEE</label>
    </span>
    </td>
  </tr>

</table>

没有 jQuery

document.querySelectorAll('td').forEach(function(td) {
  const spans = td.querySelectorAll('span')
  const ordered = Array.from(spans).sort( function (a,b) {
    return a.title.localeCompare(b.title)
  })
  var frag = ordered.reduce(function (frag, span){
    frag.appendChild(span)
    return frag
  }, document.createDocumentFragment())
  td.appendChild(frag)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <span title=BBB class="ms-RadioText">
        <input id="Checkbox1" type="checkbox"/>
        <label for="Checkbox1">BBB</label>
    </span>
      <span title=AAA class="ms-RadioText">
        <input id="Checkbox2" type="checkbox"/>
        <label for="Checkbox2">AAA</label>
    </span>
    </td>
  </tr>
  <tr>
    <td>
      <span title=FFF class="ms-RadioText">
        <input id="Checkbox1b" type="checkbox"/>
        <label for="Checkbox1b">FFF</label>
    </span>
      <span title=ZZZ class="ms-RadioText">
        <input id="Checkbox2b" type="checkbox"/>
        <label for="Checkbox2b">ZZZ</label>
    </span>
      <span title=EEE class="ms-RadioText">
        <input id="Checkbox3b" type="checkbox"/>
        <label for="Checkbox3b">EEE</label>
    </span>
    </td>
  </tr>

</table>