问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在jQuery下如何删除任意一个节点后，对节点的序号重新排序

头像
rat1991
    1165810

    说明在先本人小白，想问问大神们如何在一个列表中删除任意节点li，删除后怎样才能对列表中节点的序号进行重新排序。
    目前的问题就是删除一个节点li后，再添加节点时序号依然按照原先的顺序排序

    //添加投票选项
var num = $("ul > li").length +1
$(".vote-add-btn").click(function() {
    $(this).before("<li class='wx-form-group'><label for='artName' class='sr-only'>选项</label><input type='text' class='wx-form-control' id='artName' placeholder='填写投票选项" + num + "'><span class='del-item'><i class='fa fa-trash-o'></i></span></li>");
    num++;
  //删除投票选项
    var $btnDel = $(".wx-form-group > .del-item");
    $btnDel.click(function(){
        $(this).parent().remove();
});
    jquery
    阅读 10.1k
    3 个回答
    得票最新
    头像
    咪蛾
      2.5k3619
      ✓ 已被采纳

      jq确实蛋疼

      javascript<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<script src="jquery.js"></script>
</head>
<body>
<div class="wx-form-group">
<ul>
<li class="vote-add-btn">add</li>
</ul>
</div>
<script>
$(".vote-add-btn").click(function() {
    var num = $("ul > li").length;
    $(this).before("<li class='wx-form-group'><label for='artName' class='sr-only'>选项</label><input type='text' class='wx-form-control' id='artName' placeholder='填写投票选项" + num + "'><span class='del-item'><i class='fa fa-trash-o'>del</i></span></li>");
    $(".wx-form-group > .del-item").click(function(){
        $(this).parent().remove();
        for(i=$(this).index()-1;i<num;i++){
            newnum = i+1;
            $("ul > li").eq(i).find("input").attr("placeholder","填写投票选项"+newnum);
        }
    });
});
</script>
</body>
</html>
      头像
      Integ
        5.6k33113128

        类似这种删除某些 li 然后重新排序的工作用 angularJs 之类的 MVC 框架更合适，用 jq 会很蛋疼。
        数据和DOM双向绑定，直接操作数组中的数据，页面跟着变，非常happy。

        头像
        weknow
          33983840

          用一个for循环可以解决的，，今天早上刚做了个和你需求差不多的

          $('#single-delete-button').click(function(){
          $(this).parent().remove();
          var singles = $('#single-answer-null > div').length; // 获得剩余单选题数量
          for(var i = 0; i < singles; i++){
          $('#single-answer-null > div').eq(i).find('span').html(i+1); // 设置编号
          }
          });

          不过我这个性能不是很好，，最好能只是重排被删的后面的几个

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题