按给定顺序重新排序DOM元素

Question

我有一组具有某个类的div，需要按特定顺序重新排序。此顺序由数组确定。例如，div的顺序必须为[14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]。

我遇到的问题是，如果数字不是按顺序排列，或者顺序不按顺序排列，则div不按我想要的顺序排序。我觉得这是我失踪的小事。

＆＃13;

＆＃13;

var parents = document.getElementsByClassName('parent');

for (var i = 0; i < parents.length; i++) {
  reorder(parents[i]);
}

function reorder(container) {
  var order = [14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
  var tempList = [];
  var children = container.getElementsByClassName('child');

  for (var i = 0; i < children.length; i++) {
    tempList[i] = children[i];
  }
  for (var i = 0; i < order.length; i++) {

    container.appendChild(tempList[order[i] - 1]);
  }
}

＆＃13;

.red {
  margin-top: 15px;
  border-top:1px solid red;
  padding-top: 10px;
}

＆＃13;

<div class="parent green">
  <div class="child-other">This</div>
  <div class="other-class">Doesn't</div>
  <div class="other-class">Work</div>
  
  <div class="child">8</div>
  <div class="child">9</div>
  <div class="child">10</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">11</div>
  <div class="child">12</div>
  <div class="child">13</div>
  <div class="child">14</div>
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">7</div>
</div>

<div class="parent red">
  <div class="child-other">This</div>
  <div class="other-class">Works</div>
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
  <div class="child">10</div>
  <div class="child">11</div>
  <div class="child">12</div>
  <div class="child">13</div>
  <div class="child">14</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是您没有将子DIV的内容与order数组进行比较。请找到以下工作解决方案

＆＃13;

＆＃13;

var parents = document.getElementsByClassName('parent');
for (var i = 0; i < parents.length; i++) {
  reorder(parents[i]);
}

function findElement(num, collection) {
  var child = null
  for (var i = 0; i < collection.length; i++) {
    if (collection[i].innerHTML.trim() == num) {
      child = collection[i];
    }
  }
  return child;
}

function reorder(container) {
  var order = [14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
  var tempList = [];
  var children = container.getElementsByClassName('child');
  for (var i = 0; i < order.length; i++) {
    container.append(findElement(order[i], children))
  }
}

＆＃13;

<div class="parent green">
  <div class="child-other">This</div>
  <div class="other-class">Doesn't</div>
  <div class="other-class">Work</div>

  <div class="child">8</div>
  <div class="child">9</div>
  <div class="child">10</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">11</div>
  <div class="child">12</div>
  <div class="child">13</div>
  <div class="child">14</div>
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">7</div>
</div>

<div class="parent red">
  <div class="child-other">This</div>
  <div class="other-class">Works</div>
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
  <div class="child">10</div>
  <div class="child">11</div>
  <div class="child">12</div>
  <div class="child">13</div>
  <div class="child">14</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

JQuery按DOM顺序选择元素。并且您的逻辑通过从JQuery选择它们的顺序中选择将您的元素附加到container。

因此，当div中的数字与选择元素的顺序不对应时，您将无法获得预期结果。

虽然这个设计对我来说看起来不那么好，但最简单的方法似乎是在添加DOM之前对DOM选择进行排序。

tempList.sort(function(a,b){
    a = a.html();
    b = b.html();

    return a > b;
});

Answer 3

这是将order数组中的每个值与tempList元素的innerHTML进行比较。

var parents = document.getElementsByClassName('parent');

for (var i = 0; i < parents.length; i++) {
  reorder(parents[i]);
}

function reorder(container) {
  var order = [14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
  var children = container.getElementsByClassName('child');
  var tempList = Array.from(container.getElementsByClassName('child'));
  for (var i = 0; i < order.length; i++) {
    container.appendChild(tempList.find((el) => { return el.innerHTML == order[i]   }));
  }
}

.red {
  margin-top: 15px;
  border-top:1px solid red;
  padding-top: 10px;
}

<div class="parent green">
  <div class="child-other">This</div>
  <div class="other-class">Doesn't</div>
  <div class="other-class">Work</div>
  
  <div class="child">8</div>
  <div class="child">9</div>
  <div class="child">10</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">11</div>
  <div class="child">12</div>
  <div class="child">13</div>
  <div class="child">14</div>
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">7</div>
</div>

<div class="parent red">
  <div class="child-other">This</div>
  <div class="other-class">Works</div>
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
  <div class="child">10</div>
  <div class="child">11</div>
  <div class="child">12</div>
  <div class="child">13</div>
  <div class="child">14</div>
</div>