Question

我有一个div，里面还有很多其他的div，每个div里面都有一个按钮。我需要根据主div的ID对其顺序进行排序，但不使用jQuerey或其他任何东西，只需使用干净简单的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

mainDiv.children返回一个HTMLCollection

将其转换为数组并执行sort

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));
});

Answer 2

您可以使用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 3

这是一种解决方案，其中排序位是在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方法或散布运算符（...）的任何人，此较长的版本可能会有所帮助使事情更清楚。

我正在尝试根据其ID在HTML中订购div

3 个答案: