我正在尝试根据它们的id在html中命令div

Question

我有一个div，里面有很多其他div，每个div里面都有一个按钮。 我需要根据他们的id在主div内部订购div，但不使用jQuery或任何东西，只需简洁的JavaScript。 我找不到任何方法可以做到这一点，所以任何建议都将不胜感激。

我一直在很多网站上显示基于div中的文本而不是id的文本的解决方案。

function sortDiv() {
    var mainDiv = document.getElementById("divsGroup");
    var divs = mainDiv.children;
    for (i = 0; i < divs.length(); i++) {
        if //divs[i] is higher in the alphabet than divs[i+1] then  {
            //rearrange the divs 
        };
    };
};

我需要重新排列div，以便根据他们的id按字母顺序显示它们。

Answer 1

您可以使用javascript数组排序来对这些节点进行排序：

<div id="main">
  <div id="9"><button>9</button></div>
  <div id="2"><button>2</button></div>
  <div id="3"><button>3</button></div>
  <div id="4"><button>4</button></div>
  <div id="5"><button>5</button></div>
  <div id="1"><button>1</button></div>
  <div id="6"><button>6</button></div>
  <div id="7"><button>7</button></div>
  <div id="8"><button>8</button></div>
</div>

let parentNode = document.getElementById("main");
var e = parentNode.children;
[].slice
  .call(e)
  .sort(function(a, b) {
    return a.id.localeCompare(b.id);
  })
  .forEach(function(val, index) {
    parentNode.appendChild(val);
  });

像这样，您可以按任何属性排序，例如，您可以按这些元素的textContent或任何其他属性进行排序。 这是一支笔： https ： //codepen.io/wyzix33/pen/XvpWBg希望它有所帮助

Answer 2

这是一个解决方案，其中排序位在一个简单的id字符串数组中处理。 然后，对于每个id （已按字母顺序排列），我们遍历div以找到下一个（重新）插入DOM。

 document.getElementById("sortBtn").addEventListener("click", sortDivs); function sortDivs(){ let mainDiv = document.getElementById("divsGroup"), divs = mainDiv.children, // `[...divs]` converts `divs` to an Array so we can use the `.map` and `.sort` methods divsArray = [...divs]; // `.map(div => div.id )` makes a new Array of all the `id` strings, and // `.sort()` sorts the new Array alphabetically idList = divsArray.map(div => div.id).sort(); //console.log(idList); // logs ["a", "b", "c", "d" ] // `idList` and `divsArray` are Arrays, so we can also use // the `.forEach` method to loop through them idList.forEach(id => { // As we process each `id` alphabetically, we check each `div`'s id for a match divsArray.forEach(div => { if(div.id == id){ // Finds div with matching id mainDiv.appendChild(div); // Moves the matching div to bottom of `mainDiv` } }); }); } 

 <div id="divsGroup"> <div id="d">-d-</div> <div id="b">-b-</div> <div id="c">-c-</div> <div id="a">-a-</div> </div> <button id="sortBtn">Sort 'em</button> 

注意：此代码可能更短，但对于不熟悉Array的.map和.forEach方法或使用spread运算符（ ... ）的任何人来说，这个较长的版本可能有助于使事情更加清晰。

Answer 3

mainDiv.children返回一个HTMLCollection

将其转换为数组并执行排序

Array.from(divs).sort((a,b) => a.id > b.id ? 1 : -1)

然后循环使用appendChild按顺序将它们移动到divsGroup中

Array.from(divs).sort((a,b) => a.id > b.id ? 1 : -1).forEach(ele => {
    mainDiv.appendChild(ele);
});

的jsfiddle

结果sortDiv()函数：

function sortDiv() {
    var mainDiv = document.getElementById("divsGroup");
    var divs = mainDiv.children;

    Array.from(divs).sort((a,b) => a.id > b.id ? 1 : -1).forEach(ele => {
        mainDiv.appendChild(ele);
    });
};

或者，如果您需要将列表复制到新元素而不是移动，请使用cloneNode([deepcopy])

Array.from(divs).sort((a,b) => a.id > b.id ? 1 : -1).forEach(ele => {
    someOtherDiv.appendChild(ele.cloneNode(true));
});