如何使用jquery增加数据属性（int）？

Question

我想在我的ol中添加一些输入，我这样做， 当我在输入字段中写东西并单击添加 我创建li，然后我想添加到li数据属性 这将增加，当在图片中创建新的li时，会有代码[1]：https://i.stack.imgur.com/oAr6V.png

这是我到目前为止所尝试的（数据ID不会添加到新创建的li＆＃39; s）：

＆＃13;

＆＃13;

$(".add").click(function() {
  var $val = $(".taskk");
  var value = $val.val();
  if(value === "") {
      $(".error").text("Fill in the task");
  } else {
    $(".error").text("");
    var newLi = $('<li>' + value + '</li>');
    $('.toDo ol').append((newLi));

    /*newLi.each(function() {
        $(this).attr("data-id", i++);
        console.log(i++);
        $('.toDo ol').append((newLi));
    });
    $('.toDo ol').append((newLi)); */
    }
})

＆＃13;

body {
    background-color: #34545E;
}
.wrapper {
    max-width: 1200px;
    width: 100%;
    margin: auto;
}
.flexbox {
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
}
.box {
    min-width:  280px;
    min-height: 250px;
    border: 2px solid transparent;
    background-color: grey;
    
}
h1 {
    text-align: center;
    background-color: aliceblue;
    padding: 5px;
}
form {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
   
}
input[type="text"] {
    height: 80px;
}
input[type="button"], button {
    padding: 10px;
    width: 100px;
    margin-top: 20px;
    background-color: #000;
    border: 1px solid transparent;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}
ol {
    list-style-position: inside;
}
ol li {
    padding: 7px;
    margin-top: 2px;
    word-wrap: break-word;
}
.toDo ol li {
    background-color: #ffffff;
}
.compl ol li {
    background-color: #F35369;
}
.draft ol li {
    background-color: #ffffff;
    color: grey;
    opacity: 0.8;
    text-decoration: line-through;
}
.delete {
    background-color: #000000;
}
.error {
    padding-top: 20px;
    color: red;

}
.add {
    padding: 20px;
    background-color: black;
    margin-top: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="flexbox">
      <div class="box1">
          <h1>To do list</h1>
          <div class="box toDo">
              <ol>

              </ol>
          </div>
      </div>
      <div class="box2">
          <h1>Drafts</h1>
          <div class="box draft">
              <ol>

              </ol>
          </div>
          <button type="submit">Delete</button>
      </div>

      <div class="box3">
          <h1>Add a task</h1>
          <div class="box">
              <p class="error"></p>
              <form action="" method="post">
                  <input type="text" name="name" placeholder="Description" class="taskk">
                  <input type="button" name="add" value="Add task" class="add">
              </form>
          </div>

      </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以这样做： -

检查预先存在的li长度并为其添加1并将其添加为新创建的li的数据ID

var newLi = $('<li data-id="'+($('li').length+1)+'">' + value + '</li>');// check pre-existing `li` length and add 1 to it and add it as data-id of newly created `li`

工作片段： -

＆＃13;

＆＃13;

$(".add").click(function() {
  var $val = $(".taskk");
  var value = $val.val();
  if(value === "") {
    $(".error").text("Fill in the task");
  } else {
    $(".error").text("");
    var newLi = $('<li data-id="'+($('li').length+1)+'">' + value + '</li>');
    $('.toDo ol').append((newLi));
  }
});

＆＃13;

body {
    background-color: #34545E;
}
.wrapper {
    max-width: 1200px;
    width: 100%;
    margin: auto;
}
.flexbox {
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
}
.box {
    min-width:  280px;
    min-height: 250px;
    border: 2px solid transparent;
    background-color: grey;
    
}
h1 {
    text-align: center;
    background-color: aliceblue;
    padding: 5px;
}
form {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
   
}
input[type="text"] {
    height: 80px;
}
input[type="button"], button {
    padding: 10px;
    width: 100px;
    margin-top: 20px;
    background-color: #000;
    border: 1px solid transparent;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}
ol {
    list-style-position: inside;
}
ol li {
    padding: 7px;
    margin-top: 2px;
    word-wrap: break-word;
}
.toDo ol li {
    background-color: #ffffff;
}
.compl ol li {
    background-color: #F35369;
}
.draft ol li {
    background-color: #ffffff;
    color: grey;
    opacity: 0.8;
    text-decoration: line-through;
}
.delete {
    background-color: #000000;
}
.error {
    padding-top: 20px;
    color: red;

}
.add {
    padding: 20px;
    background-color: black;
    margin-top: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="flexbox">
        <div class="box1">
            <h1>To do list</h1>
            <div class="box toDo">
                <ol>

                </ol>
            </div>
        </div>
        <div class="box2">
            <h1>Drafts</h1>
            <div class="box draft">
                <ol>

                </ol>
            </div>
            <button type="submit">Delete</button>
        </div>

        <div class="box3">
            <h1>Add a task</h1>
            <div class="box">
                <p class="error"></p>
                <form action="" method="post">
                    <input type="text" name="name" placeholder="Description" class="taskk">
                    <input type="button" name="add" value="Add task" class="add">
                </form>
            </div>

        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;