Question

有没有办法在javascript中以有序的方式追加子节点？我这里有这个代码来创建和排序列表并在其中添加列表项，但它没有将它们放在有序的表单中。

var listContainer = document.getElementById("content1");
var listElement = document.createElement("ol");
listContainer.appendChild(listElement);

for(i = 0; i < arr.length; i++) {

    var listItem = document.createElement("li");
    listItem.innerHTML = arr[i].color + " " + arr[i].value +"</br>";
    listElement.appendChild(listItem);

}

Answer 1

我假设您希望按照“＆＃39;值”的顺序列出项目。阵列中的属性（正如你所提到的那样，蓝色＆＃39;应该在绿色＆＃39;之前。

如果是这样，您需要在迭代输出之前对相应属性上的数组进行排序。

使用此方法，您可以根据需要向数组添加更多项目 - 只需在更新输出之前调用排序例程...

我已更新您的代码（以及@ mcon＆＃39;小提琴中提供的代码），并添加了排序比较器。

感谢@Wogan这里有一个简单的排序函数示例：https://stackoverflow.com/a/1129270/4619012

<div id="content1"></div>

    <script type="text/javascript">
        var listContainer = document.getElementById("content1");
        var listElement = document.createElement("ol");
        listContainer.appendChild(listElement);

        var arr = [
            { color: 'red', value: '#f00' },
            { color: 'green', value: '#0f0' },
            { color: 'blue', value: '#00f' },
            { color: 'cyan', value: '#0ff' },
            { color: 'magenta', value: '#f0f' }
        ]

        function compareValue(a, b) {
            if (a.value < b.value)
                return -1;
            if (a.value > b.value)
                return 1;
            return 0;
        }

        arr.sort(compareValue);

        for (i = 0; i < arr.length; i++) {
            var listItem = document.createElement("li");
            listItem.innerHTML = arr[i].color + " " + arr[i].value + "</br>";
            listElement.appendChild(listItem);
        }
    </script>

通过javascript在有序列表中追加子列表项

1 个答案: