Question

我正在使用jQuery UI排序。列表项包含隐藏的输入字段。我希望name属性的值根据有序列表中的列表项位置而改变。

这是我到目前为止所拥有的，

<ol id='externs'>
    <li>
        fred
        <input type="hidden" name="" value="203">
    </li>
    <li>
        joe
        <input type="hidden" name="" value="993">
    </li>
</ol>
<ol id='interns'>
    <li>
        suzy
        <input type="hidden" name="" value="2">
    </li>
    <li>
        marty
        <input type="hidden" name="" value="13">
    </li>
    <li>
        foofoo
        <input type="hidden" name="" value="201">
    </li>

</ol>

到目前为止我的jQuery ......

$('#externs li input').attr('name','e_'+n);
$('#interns li input').attr('name','i_'+n);

其中n =列表中的顺序。也许把它放在某种循环中会起作用吗？

生成的HTML应该是......

<ol id='externs'>
    <li>
        fred
        <input type="hidden" name="e_1" value="203">
    </li>
    <li>
        joe
        <input type="hidden" name="e_2" value="993">
    </li>
</ol>
<ol id='interns'>
    <li>
        suzy
        <input type="hidden" name="i_1" value="2">
    </li>
    <li>
        marty
        <input type="hidden" name="i_2" value="13">
    </li>
    <li>
        foofoo
        <input type="hidden" name="i_3" value="201">
    </li>

</ol>

编辑：

本应该发布我的jQuery UI可排序代码。每当我拖放东西时，我都需要运行代码。我应该使用eventListener吗？或者我可以将我的代码连接到这个：

    $( "#externs, #interns" ).sortable({
        dropOnEmpty: true
    }).disableSelection();

编辑2：

我最后只是点击运行代码：

    $('#screen-students').click(function(){

        $('#externs li input').attr('name', function(index) {
            return 'e_' + (index + 1);
        });

        $('#interns li input').attr('name', function(index) {
            return 'i_' + (index + 1);
        });

    });

Answer 1

将回调函数传递给.attr：

$('#externs li input').attr('name', function(index) {
  return 'e_' + (index + 1);
});

$('#interns li input').attr('name', function(index) {
  return 'i_' + (index + 1);
});

Answer 2

这个怎么样：

<script type="text/javascript">
$(document).ready(function() {
  $('#externs li input').each(function(index)  { 
      $(this).attr('name','e_'+index);
  });
  $('#interns li input').each(function(index) {
    $(this).attr('name','i_' + index);
  });
});
</script>

Answer 3

var eCount = $("#externs").children("li").length;
var iCount = $("#interns").children("li").length;

for (var i =1 ; i < eCount;i++)
{
$("#externs").find("input").eq(i-1).attr('name','e_'+i);
}

for (var j =1 ; j < eCount;j++)
{
$("#interns").find("input").eq(j-1).attr('name','i_'+j);
}

Answer 4

试试这个

$(document).ready(function () {
   var elength = $("#externs").find("li").length;
   var ilength = $("#interns").find("li").length;

    for (var i =1 ; i < elength;i++)
    {
      $("#externs").find("input").eq(i-1).attr('name','e_'+i);
    }

    for (var j =1 ; j < ilength;j++)
    {
      $("#interns").find("input").eq(j-1).attr('name','i_'+j);
    }
});

以下是FIDDLE。

Answer 5

尝试

$('#externs, #interns').each(function () {
    var id = this.id;
    $(this).find('input').attr('id', function (i) {
        return id[0] + '_' + i;
    })
})

演示：Fiddle

如何获取<ol>中的列表编号以匹配</ol>

5 个答案: