Javascript排序列表和内容

• function外部的贴花var n
• Increment在每个函数调用中

var n = 1;
function addItem() {
  var item = prompt("Please insert a text", "It will be added to the list");
  if (item != null) {
    ++n;
    var ol = document.getElementById("myList");
    var li = document.createElement("li");
    li.innerHTML = "item " + n + ':' + item;
    ol.appendChild(li);
  } else {
    document.getElementById("text").innerHTML = "&nbsp";
  }
}

#nested {
  width: 95%;
  height: 100%;
  border: 1px solid red;
  margin-left: auto;
  margin-right: auto;
}
#large {
  width: 80%;
  height: 100%;
  border: 1px solid blue;
  margin-left: auto;
  margin-right: auto;
}
ol {
  list-style-type: arabic;
  list-style-position: inside;
  margin-top: 10px;
  margin-right: 30px;
}
.right {
  float: right;
}

<div id="large">
  <div id="nested">
    <form method="get">
      <input type="button" id="resizeBut" name="resize" value="Collapse" onclick="change()" />
      <br />
      <br />
      <input type="button" id="newItem" name="items" value="Add Item" onclick="addItem()" />
    </form>
    <ol reversed="reversed" class="right" id="myList">
      Unordered list
      <li>item 1:<span id="text">Text</span>
      </li>
    </ol>
  </div>
</div>

答案取决于您是否能够使用库。如果你可以使用jQuery，这会容易得多，如果不能，它仍然是可行的，只是更多的代码。我会写一个答案。。。

jQuery应答。。。

function addItem() {
  var item = prompt("Please insert a text", "It will be added to the list");
  if (item != null) {
    var count = $('#myList').find('ol').find('li').length;
    if(count > 1) {
        $('#myList').find('ol').find('li').hide();
    }
    var nextItem = count + 1;
    $('#myList').find('ol').append('<li>Item ' + nexItem + ':' + item + '</li>');
  } else {
    $('#text').html('&nbsp;');
  }
}

非jQuery(Vanilla JavaScript(。。。

function addItem() {
  var item = prompt("Please insert a text", "It will be added to the list");
  if (item != null) {
    var n = document.getElementById("myList").getElementsByTagName("li").length;
    if(n > 0) {
        var elements = document.getElementById("myList").getElementsByTagName("li");
        for(var i = 0; i < n; i++) {
            elements[i].style.visibility = "hidden";
            elements[i].style.display = "none";
        }
    }
    var nextItem = n + 1;
    var ol = document.getElementById("myList");
    var li = document.createElement("li");
    ol.appendChild(li);
    li.innerHTML += "item " + nextItem + ':' + item;
  } else {
    document.getElementById("text").innerHTML = "&nbsp";
  }
}

还有一种方法可以加快速度，将计数存储为变量，然后每次递增以获得新的数字，这样就不会每次都计算DOM元素。这将是一个简单的补充。这是一个例子。。。

//inside a <script > tag
var count = 0;
function addItem() {
    var item = prompt("Please insert text here", "It will be added to the list");
    if(item != null) {
        if(count > 0) {
            var items = document.getElementById("myList").getElementsByTagName("li");
            for(var i = 0; i < items; i++) {
                items[i].style.visibility = "hidden";
                items[i].style.display = "none";
            }
        }
            count += 1;
            var list = document.getElementById("myList");
            var li = document.createElement("li");
            li.innerHTML = "item " + count + ": " + item;
            list.getElementsByTagName("ol").append(li);
    } else {
        document.getelementById("text").innerHTML = "&nbsp;";
    }
}

我希望这能有所帮助。有很多。。。解决这一问题的方法有很多，这些只是其中的一对。如果这不起作用或者你需要更多帮助，请告诉我。

您还可以随时计算列表中有多少li，并将其用于n。对于删除，您只需要在第一次通过时隐藏或删除项目。

var ADDED_ITEMS = 0;
function addItem() {
  var placeholder = "It will be added to the list";
  var item = prompt("Please insert a text", placeholder);
  if (item != null) {
    var ol = document.getElementById("myList");
    // Remove the existing LI on the first pass
    if (++ADDED_ITEMS == 1)
      ol.removeChild( ol.querySelector('li') );
    // Get count of LI in list
    var n = ol.querySelectorAll('li').length + 1;
    
    // Create new LI
    var li = document.createElement("li");
    ol.appendChild(li);
    li.innerHTML += "item " + n + ':' + item;
  } else {
    document.getElementById("text").innerHTML = "&nbsp";
  }
}

#nested {
  width: 95%;
  height: 100%;
  border: 1px solid red;
  margin-left: auto;
  margin-right: auto;
}
#large {
  width: 80%;
  height: 100%;
  border: 1px solid blue;
  margin-left: auto;
  margin-right: auto;
}
ol {
  list-style-type: arabic;
  list-style-position: inside;
  margin-top: 10px;
  margin-right: 30px;
}
.right {
  float: right;
}

<div id="large">
  <div id="nested">
    <form method="get">
      <input type="button" id="resizeBut" name="resize" value="Collapse" onclick="change()" />
      <br />
      <br />
      <input type="button" id="newItem" name="items" value="Add Item" onclick="addItem()" />
    </form>
    <ol reversed="reversed" class="right" id="myList">
      Unordered list
      <li>item 1:<span id="text">Text</span></li>
    </ol>
  </div>
</div>