jquery - 根据复选框的值对复选框进行排序(按特定顺序)

Question

我有由 WordPress 插件按特定顺序放置的复选框。

生成的 HTML 代码如下所示:

<div class="wpgmza_filter_container" id="wpgmza_filter_container_5">
        <div class="wpgmza_cat_checkbox_holder wpgmza_cat_checkbox_5">
            <div class="wpgmza_cat_checkbox_item_holder_first">
                <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_0" name="wpgmza_cat_checkbox" mid="5" value="0">
                <div>
                    <label for="wpgmza_cat_checkbox_0">All</label>
                </div>
            </div>
            <div class="wpgmza_cat_checkbox_item_holder">
                <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_2" name="wpgmza_cat_checkbox" mid="5" value="2">
                <div>
                    <label for="wpgmza_cat_checkbox_2">Airco</label>
                </div>
            </div>
            <div class="wpgmza_cat_checkbox_item_holder">
                <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_3" name="wpgmza_cat_checkbox" mid="5" value="3">
                <div>
                    <label for="wpgmza_cat_checkbox_3">Vent</label>
                </div>
            </div>
            <div class="wpgmza_cat_checkbox_item_holder">
                <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_5" name="wpgmza_cat_checkbox" mid="5" value="5">
                <div>
                    <label for="wpgmza_cat_checkbox_5">Sun</label>
                </div>
            </div>
            <div class="wpgmza_cat_checkbox_item_holder">
                <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_1" name="wpgmza_cat_checkbox" mid="5" value="1">
                <div>
                    <label for="wpgmza_cat_checkbox_1">One</label>
                </div>
            </div>
        </div>
    </div>

以下代码根据值进行排序(从高到低):

function sortByID(a, b)
{
return (a.children(“input”).val() > b.children("input").val()) ? 1 : -1;
}

var container = jQuery("div.wpgmza_filter_container");
container.children("div").sort(sortByID).appendTo(container);

是否可以根据我定义的值列表对它们进行排序？我希望它们按以下顺序显示(基于值):3,5,0,1,2

Answer 1

要对以非顺序方式给出的项目进行排序，您可以指定数组中的顺序，然后比较该数组中给定值的 indexOf()。

接受我对您的previous question的回答，你可以这样扩展逻辑:

function sortByValue(a, b) {
  var aVal = parseInt($(a).find('input').val(), 10),
    bVal = parseInt($(b).find('input').val(), 10);
  return order.indexOf(aVal) > order.indexOf(bVal);
}

var order = [3, 5, 0, 1, 2];
var $container = $("div.wpgmza_cat_checkbox_holder");
$container.children("div").sort(sortByValue).appendTo($container);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wpgmza_filter_container" id="wpgmza_filter_container_5">
  <div class="wpgmza_cat_checkbox_holder wpgmza_cat_checkbox_5">
    <div class="wpgmza_cat_checkbox_item_holder_first">
      <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_0" name="wpgmza_cat_checkbox" mid="5" value="0">
      <div>
        <label for="wpgmza_cat_checkbox_0">All</label>
      </div>
    </div>
    <div class="wpgmza_cat_checkbox_item_holder">
      <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_2" name="wpgmza_cat_checkbox" mid="5" value="2">
      <div>
        <label for="wpgmza_cat_checkbox_2">Airco</label>
      </div>
    </div>
    <div class="wpgmza_cat_checkbox_item_holder">
      <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_3" name="wpgmza_cat_checkbox" mid="5" value="3">
      <div>
        <label for="wpgmza_cat_checkbox_3">Vent</label>
      </div>
    </div>
    <div class="wpgmza_cat_checkbox_item_holder">
      <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_5" name="wpgmza_cat_checkbox" mid="5" value="5">
      <div>
        <label for="wpgmza_cat_checkbox_5">Sun</label>
      </div>
    </div>
    <div class="wpgmza_cat_checkbox_item_holder">
      <input type="checkbox" class="wpgmza_checkbox form-control" id="wpgmza_cat_checkbox_1" name="wpgmza_cat_checkbox" mid="5" value="1">
      <div>
        <label for="wpgmza_cat_checkbox_1">One</label>
      </div>
    </div>
  </div>
</div>