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_1" name="wpgmza_cat_checkbox" mid="5" value="1">
                <div>
                    <label for="wpgmza_cat_checkbox_1">Airco</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">Vent</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);

Answer 1

排序逻辑的问题在于您正在比较字符串，并且您还要对.wpgmza_filter_container的子项进行排序，其中只有一个。{1}}。您需要对.wpgmza_cat_checkbox_holder的子项进行排序。您还在排序逻辑中使用了无效的双引号字符。试试这个：

function sortByValue(a, b) {
  var aVal = parseInt($(a).find('input').val(), 10),
    bVal = parseInt($(b).find('input').val(), 10);
  return aVal < bVal;
}

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.1/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_1" name="wpgmza_cat_checkbox" mid="5" value="1">
      <div>
        <label for="wpgmza_cat_checkbox_1">Airco</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">Vent</label>
      </div>
    </div>
  </div>
</div>

如果您想确保“全部”选择保留在列表中的第一位，您可以使用:not从该div中排除过滤器逻辑：

$container.children('div:not(".wpgmza_cat_checkbox_item_holder_first")').sort(sortByValue).appendTo($container);

基于值的div内的jQuery排序复选框

1 个答案: