排列列表的排序逻辑答案

【问题标题】：Sorting logic for arranging a list排列列表的排序逻辑
【发布时间】：2016-10-27 14:10:03
【问题描述】：

我对排序进行了一些更改，因为之前的逻辑只是将当前值与第一个索引值进行比较。我正在尝试与所有值进行比较。

如果值为正，请检查我刚刚编写的排序逻辑请指导我。

<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
    function myFunction() {
  var node = document.createElement("LI");
  var answer = document.getElementById("selectMe").value;
  var textboxvalue = document.getElementById("t1").value;
  if (answer == "positive") {
    var textnode = document.createTextNode(textboxvalue);
    node.appendChild(textnode);
    var p = document.getElementById("Positive").childNodes; // child Nodes of positive
  //sorting logic   
var p1= new array(100);
   p1=  document.getElementById("Positive").childNodes;
   var i;
var len= p1.length;
     for(i=0;i<len;i++){
     var preValue = p[i].innerHTML;
     if (preValue > textboxvalue) { // compare with previous positive value to insertbefore or append
        document.getElementById("Positive").insertBefore(node, p[1]);
      } else {
        document.getElementById("Positive").appendChild(node);
      }
     else {
      document.getElementById("Positive").appendChild(node);
    }    
      }
  } else if (answer == "negative") {
    var c = document.getElementById("negative").childNodes; // child Nodes of negative
    var textnode = document.createTextNode(textboxvalue);
    node.appendChild(textnode);

    if (c[1]) {
      var preValue = c[1].innerHTML;
      if (preValue > textboxvalue) { // compare with previous negative value to insertbefore or append
        document.getElementById("negative").insertBefore(node, c[1]);
      } else {
        document.getElementById("negative").appendChild(node);
      }
    } else {
      document.getElementById("negative").appendChild(node);
    }
  }

  //document.body.appendChild(node);
}

    </script>
</head>

<body>
    <h3> <strong> Javascript Test </strong></h3>
    <form name="myForm" id="myForm" method="post">
        <table>
            <tr>
                <td>
                    <label>Term: </label>
                </td>
                <td>
                    <input type="text" name="fname" id="t1"> </td>
            </tr>
            <br/>
            <tr>
                <td>
                    <label> Type:</label>
                </td>
                <td>
                    <select name="title" required id="selectMe">
                        <option value="">Choose:</option>
                        <option value="positive">Positive</option>
                        <option value="negative">Negative</option>
                    </select>
                    </select>
                </td>
                <tr>
                    <td>
                        <button onclick="myFunction()"> Onclick </button>
                    </td>
                </tr>
        </table>
    </form>
    <fieldset>
        <legend>See Result in this Section:</legend>
        <label> Positive </label>
        <ul id="Positive">
        </ul>
        <label> Negative </label>
        <ul id="negative">
        </ul>
    </fieldset>
    <script type="text/javascript">
        $("#myForm").submit(function(e) {
            e.preventDefault();
            if (validateForm()) {
                myFunction();
            }
        });
    </script>
</body>

</html>

【问题讨论】：

标签： html forms select html-lists html-table

【解决方案1】：

循环遍历子元素数组并比较每个元素并在insertBefore或追加元素

function myFunction() {
  var node = document.createElement("LI");
  var answer = document.getElementById("selectMe").value;
  var textboxvalue = document.getElementById("t1").value;
  if (answer == "positive") {
    var textnode = document.createTextNode(textboxvalue);
    node.appendChild(textnode);
    var p = document.getElementById("Positive").childNodes; // child Nodes of positive
    if (p[1]) {
      for (var i = 0; i < p.length; i++) {
        alert(i);
        var preValue = p[i].innerHTML;
        if (preValue > textboxvalue) { // compare with previous positive value to insertbefore or append
          document.getElementById("Positive").insertBefore(node, p[i]);
          break;
        } else {
          document.getElementById("Positive").appendChild(node);
        }
      }
    } else {
      document.getElementById("Positive").appendChild(node);
    }

  } else if (answer == "negative") {
    var c = document.getElementById("negative").childNodes; // child Nodes of negative
    var textnode = document.createTextNode(textboxvalue);
    node.appendChild(textnode);

    if (c[1]) {
      for (var i = 0; i < c.length; i++) {
        alert(i);
        var preValue = c[i].innerHTML;
        if (preValue > textboxvalue) { // compare with previous negative value to insertbefore or append
          document.getElementById("negative").insertBefore(node, c[i]);
          break;
        } else {
          document.getElementById("negative").appendChild(node);
        }
      }
    } else {
      document.getElementById("negative").appendChild(node);
    }
  }

  //document.body.appendChild(node);
}

http://codepen.io/nagasai/pen/ZOLyWZ

【讨论】：

如果我的回答对您的问题有所帮助，请在可能的情况下为我投票 :)