Question

我正在使用jQuery UI Sortable将列表设为“可分类”。当页面加载现有数据时（无论是来自数据库还是仅来自之前的表单提交），我坚持使用代码将项目放入适当的类别。

html是带有单选按钮的列表：

<ul id="Main" class="sort">
  <li>
    <input type="radio" name="i1" id="i1_M" value="M">
    <input type="radio" name="i1" id="i1_A" value="A">
    <input type="radio" name="i1" id="i1_B" value="B" checked>
    <input type="radio" name="i1" id="i1_C" value="C">
    This is the first item
  </li>
  <li>
    <input type="radio" name="i2" id="i2_M" value="M" checked>
    <input type="radio" name="i2" id="i2_A" value="A">
    <input type="radio" name="i2" id="i2_B" value="B">
    <input type="radio" name="i2" id="i2_C" value="C">
    This is the second item
  </li>
  [... etc. ...]
</ul>
<ul id="CatA" class="sort subC"></ul>
<ul id="CatB" class="sort subC"></ul>
<ul id="CatC" class="sort subC"></ul>

我想要的是在页面加载时运行的一些代码，用于将选项A被检查的项目移动到列表CatA，将选项B检查到CatB的项目等，将选项M的项目保留在它们所在的位置。即使在浪费了一天寻找解决方案并在教程后阅读教程之后，我也没有最开始的想法（所有这些都声称是针对Javascript初学者，让我对我明显缺乏智力的能力感到沮丧，但我离题）。帮助

（页面是asp-classic，jQuery是版本1.4.2，jQuery UI是版本1.8。）

Answer 1

这样的东西？（Demo）

$(document).ready(function(){
 $('#Main').find(':checked').each(function(){
  $(this).parent().appendTo( $('#Cat' + $(this).val() ));
 })
})

它的作用是查找所有选中的单选按钮值，然后将整个内容移动到类别中。由于未找到#CatM，因此它将无声地失败并保留M个选定的单选按钮。

注意：单选按钮值必须全部为单个字母并且大写才能使此脚本正常工作（它必须与类别ID匹配）。

Answer 2

此插件可用于执行您想要执行的操作。

http://razorjack.net/quicksand/

基于单选按钮 - jQuery在页面加载时对项目进行分类

2 个答案: