为什么jQuery Selectable插件不能与foreach生成的列表一起使用？

Question

我目前正在研究MVC项目并实现了jQuery Selectable插件。 我的模型中有一个字符串，我在下面的视图中有Split() ：

@{
    var size = Model.AvailableSizes.Split(',');
    foreach (var item in size)
    {
        <ol class="ui-selectable" id="selectable">
            <li class="ui-selectable">@item</li>
        </ol>
    }
} 

这是我视图中定义的静态脚本：

<script type="text/javascript">
    $(document).ready(function () {
        $("#selectable").selectable();
    });
</script>

selectable jQuery插件为每个项目成功生成<ol> ，但我只能选择第一个项目而不是其余项目。 问题是什么？

Answer 1

你应该把<ol> 放在循环之外 。 现在你正在创建一个N ol元素，里面有一个li ，所有这些元素都具有相同的id ，这是无效的HTML，也是问题的原因。

尝试这个：

<ol class="ui-selectable" id="selectable">
    @{
        var size = Model.AvailableSizes.Split(',');
        foreach (var item in size)
        {
            <li class="ui-selectable">@item</li>
        }
    } 
</ol>