Question

我有一个包含分组项目的长列表，我的访问者从此列表中选择项目并提交表单，我需要在提交表单或页面加载后将选中的项目保留在列表顶部，因为在他们进入表单的任何时候让他们知道他们选择了哪些项目而不滚动整个列表

带有选中项目的列表如下所示：

<div class="main-div">

    <div class="group-title"><span>group one title</span></div>

         <div class="items"><input type="checkbox" id="item-1" value="1" name="item_name[]" ><label for="item-1">item1</label></div>
         <div class="items"><input type="checkbox" id="item-2" value="2" name="item_name[]" ><label for="item-2">item2</label></div>
         <div class="items"><input type="checkbox" id="item-3" value="3" name="item_name[]" checked ><label for="item-3">item3</label></div>
         <div class="items"><input type="checkbox" id="item-4" value="4" name="item_name[]" ><label for="item-4">item4</label></div>
         <div class="items"><input type="checkbox" id="item-5" value="5" name="item_name[]" checked ><label for="item-5">item4</label></div>

    <div class="group-title"><span>group two title</span></div>

         <div class="items"><input type="checkbox" id="item-6" value="6" name="item_name[]" ><label for="item-6">item6</label></div>
         <div class="items"><input type="checkbox" id="item-7" value="7" name="item_name[]" ><label for="item-7">item7</label></div>
         <div class="items"><input type="checkbox" id="item-8" value="8" name="item_name[]" checked ><label for="item-8">item8</label></div>
         <div class="items"><input type="checkbox" id="item-9" value="9" name="item_name[]"checked ><label for="item-9">item9</label></div>
         <div class="items"><input type="checkbox" id="item-10"value="10" name="item_name[]"><label for="item-10">item10</label></div>

</div>

我需要它看起来像下面这样：

<div class="main-div">

       <div class="items"><input type="checkbox" id="item-3" value="3" name="item_name[]" checked ><label for="item-3">item3</label></div>
       <div class="items"><input type="checkbox" id="item-5" value="5" name="item_name[]" checked ><label for="item-5">item4</label></div>
       <div class="items"><input type="checkbox" id="item-8" value="8" name="item_name[]" checked ><label for="item-8">item8</label></div>
       <div class="items"><input type="checkbox" id="item-9" value="9" name="item_name[]" checked ><label for="item-9">item9</label></div>

  <div class="group-title"><span>group one title</span></div>

     <div class="items"><input type="checkbox" id="item-1" value="1" name="item_name[]" ><label for="item-1">item1</label></div>
     <div class="items"><input type="checkbox" id="item-2" value="2" name="item_name[]" ><label for="item-2">item2</label></div>
     <div class="items"><input type="checkbox" id="item-4" value="4" name="item_name[]" ><label for="item-4">item4</label></div>


   <div class="group-title"><span>group two title</span></div>

     <div class="items"><input type="checkbox" id="item-6" value="6" name="item_name[]" ><label for="item-6">item6</label></div>
     <div class="items"><input type="checkbox" id="item-7" value="7" name="item_name[]" ><label for="item-7">item7</label></div>
     <div class="items"><input type="checkbox" id="item-10" value="10" name="item_name[]"><label for="item-10">item10</label></div>

</div>

Answer 1

尝试

jQuery(function($){
    $('.main-div .group-title').each(function(){
        $(this).nextUntil('.group-title', '.items').data('group', this);
    });

    $('.main-div .items').has('input:checked').prependTo('.main-div');

    $('.main-div').on('change', 'input',function(){
        var $item = $(this).closest('.items');
        if(this.checked){
            $item.insertBefore($('.main-div .group-title').first())
        }else{
            $item.appendTo($item.data('group'))
        }
    });
})

演示：Fiddle

Answer 2

您实际上可以使用jQuery的before和after代码。它看起来像这样：

function swapElements(elm1, elm2) {
    var parent1, next1,
        parent2, next2;

    parent1 = elm1.parentNode;
    next1   = elm1.nextSibling;
    parent2 = elm2.parentNode;
    next2   = elm2.nextSibling;

    parent1.insertBefore(elm2, next1);
    parent2.insertBefore(elm1, next2);
}

这只是骨架。好问题，所以我正在研究这个问题。

如何在列表顶部保留选中的项目

2 个答案: