我有一个带有动态列表项的复选框。我想在加载列表时将选中的项推入列表顶部。
我尝试了如下代码段所示。我尝试更改选中项目的颜色。颜色被更改，但没有将项目推到列表的顶部。
null
$(document).ready(function(){
$("input[name='geo[]']").each(function(){
if ($(this).is(":checked")){
$(this).prop("checked",true);
$(this).parent('li').css('background-color','#3875D7');
$(this).parent('li').prepend($(this));
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul class="checklist">
<li tabindex="0" class="even" ><input type="checkbox" value="US_East" name="geo[]" id="geo_US_East" ><label for="geo_US_East" class="leaveRoomForCheckbox">US East</label></li>
<li tabindex="0" class="odd" ><input type="checkbox" value="US_West" name="geo[]" id="geo_US_West" ><label for="geo_US_West" class="leaveRoomForCheckbox">US West</label></li>
<li tabindex="0" class="even checked" ><input type="checkbox" value="NSU" name="geo[]" id="geo_NSU" checked="checked"><label for="geo_NSU" class="leaveRoomForCheckbox">NSU</label></li>
</ul>null
null
$(document).ready(function(){
$("input[name='geo[]']").each(function(){
if ($(this).is(":checked")){
$(this).prop("checked",true);
$(this).parent('li').css('background-color','#3875D7');
$(this).parents('ul').prepend($(this).parent('li'));
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul class="checklist">
<li tabindex="0" class="even" ><input type="checkbox" value="US_East" name="geo[]" id="geo_US_East" ><label for="geo_US_East" class="leaveRoomForCheckbox">US East</label></li>
<li tabindex="0" class="odd" ><input type="checkbox" value="US_West" name="geo[]" id="geo_US_West" ><label for="geo_US_West" class="leaveRoomForCheckbox">US West</label></li>
<li tabindex="0" class="even checked" ><input type="checkbox" value="NSU" name="geo[]" id="geo_NSU" checked="checked"><label for="geo_NSU" class="leaveRoomForCheckbox">NSU</label></li>
</ul>
您可以首先将ul标记作为li的父标记，然后将列表项li前置到ul列表中。
null
$(document).ready(function() {
$("input[name='geo[]']").each(function() {
if ($(this).is(":checked")) {
$(this).parent('li').css('background-color', '#3875D7');
let item = $(this).parent('li');
let list = $(item).parent('ul');
$(list).prepend(item);
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul class="checklist">
<li tabindex="0" class="even"><input type="checkbox" value="US_East" name="geo[]" id="geo_US_East"><label for="geo_US_East" class="leaveRoomForCheckbox">US East</label></li>
<li tabindex="0" class="odd"><input type="checkbox" value="US_West" name="geo[]" id="geo_US_West"><label for="geo_US_West" class="leaveRoomForCheckbox">US West</label></li>
<li tabindex="0" class="even checked"><input type="checkbox" value="NSU" name="geo[]" id="geo_NSU" checked="checked"><label for="geo_NSU" class="leaveRoomForCheckbox">NSU</label></li>
</ul>
你好我希望这进一步帮助你，只是执行了清单，不是你想要的颜色。
编辑:添加颜色
null
var list = $("ul");
var unorderedList= list.children();
list.on("click", ":checkbox", function() {
var i = document.createDocumentFragment();
var checked = document.createDocumentFragment();
var unchecked = document.createDocumentFragment();
for (i = 0; i < unorderedList.length; i++) {
if (unorderedList[i].getElementsByTagName("input")[0].checked) {
checked.appendChild(unorderedList[i]);
unorderedList[i].style.backgroundColor ="red";
} else {
unchecked.appendChild(unorderedList[i]);
unorderedList[i].style.backgroundColor ="white";
}
}
list.append(checked).append(unchecked);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul class="checklist">
<li><label for="geo_US_East" class="leaveRoomForCheckbox"><input type="checkbox" value="US_East" name="geo[]" id="geo_US_East" >US East</label></li>
<li><label for="geo_US_West" class="leaveRoomForCheckbox"><input type="checkbox" value="US_West" name="geo[]" id="geo_US_West" >US West</label></li>
<li><label for="geo_NSU" class="leaveRoomForCheckbox"><input type="checkbox" value="NSU" name="geo[]" id="geo_NSU">NSU</label></li>
</ul>