我有一个div #subfilterNamesContainer
,其中包含一个复选框列表。我正在尝试编写一个函数,将复选框分为3个部分。
class="default"
复选框应按价值排在最前面,无论是否选中。 class="default"
的复选框,这些复选框按值排序。 class="default"
。 在这三个部分之间建立横向规则也是理想的。
我该怎么做这个任务?目标是在顶部显示用户默认复选框,然后显示已选中的非默认复选框,后跟非默认的未选中复选框。只有当这个新功能(让我们称之为sortGiveNamesFilter
)被调用时,这并不需要对用户检查做出响应。
<div id="subfilterNamesContainer">
<input type="checkbox" value="X"> X <br>
<input type="checkbox" value="A"> A <br>
<input type="checkbox" value="A B" class="default"> A B <br>
<input type="checkbox" value="A A" class="default"> A A <br>
<input type="checkbox" value="F"> F <br> <--THiS ONE WILL BE CHECKED
<input type="checkbox" value="E"> E <br> <--THiS ONE WILL BE CHECKED
</div>
调用我的新函数时的最终结果应该是:
<div id="subfilterNamesContainer">
<input type="checkbox" value="A A" class="default"> A A <br>
<input type="checkbox" value="A B" class="default"> A B <br>
<hr>
<input type="checkbox" value="E"> E <br> <--THiS ONE WILL BE CHECKED
<input type="checkbox" value="F"> F <br> <--THiS ONE WILL BE CHECKED
<hr>
<input type="checkbox" value="A"> A <br>
<input type="checkbox" value="X"> X <br>
</div>
答案 0 :(得分:2)
首先,您需要稍微修改HTML,以便在重新排列复选框时,它们旁边的文本节点也会移动。为此,您可以使用label
元素围绕两个节点,如下所示:
<div id="subfilterNamesContainer">
<label>
<input type="checkbox" value="X"> X
</label>
<label>
<input type="checkbox" value="A"> A
</label>
<label>
<input type="checkbox" value="A A" class="default"> A A
</label>
<label>
<input type="checkbox" value="A B" class="default"> A B
</label>
<label>
<input type="checkbox" value="F" checked="true"> F
</label>
<label>
<input type="checkbox" value="E" checked="true"> E
</label>
</div>
要实现label
元素的排序,可以使用sort()
方法,提供自己的函数,定义排序逻辑,首先放置.default
复选框,然后选中要检查的复选框。 ,然后不选中,每个子部分由复选框的value
排序。排序完成后,您可以搜索最后的.default
和:checked
元素,并在其后添加hr
。像这样:
function sortGiveNamesFilter() {
$('#subfilterNamesContainer label').sort(function(a, b) {
var $a = $(a).find(':checkbox'),
$b = $(b).find(':checkbox');
if ($a.hasClass('default') && !$b.hasClass('default'))
return -1;
else if (!$a.hasClass('default') && $b.hasClass('default'))
return 1;
if ($a.is(':checked') && !$b.is(':checked'))
return -1;
else if (!$a.is(':checked') && $b.is(':checked'))
return 1;
if ($a.val() < $b.val())
return -1;
else if ($a.val() > $b.val())
return 1;
return 0;
}).appendTo('#subfilterNamesContainer');
$('#subfilterNamesContainer .default:last, #subfilterNamesContainer :checked:last').closest('label').after('<hr />');
}
请注意,使用三元表达式可以缩短JS代码,我只是保持冗长,以便明确它是如何工作的。