如何根据颜色对div进行排序？

Question

我需要什么：我正在使用HTML，CSS，Javascript / JQuery开发一个网站。我有6个div。根据条件，div必须改变颜色，大小，文本和div必须根据颜色（红色，橙色，然后是绿色）进行排序。

我实施的内容：我在CSS reddivs，orangedivs和greendivs中创建了三个类。现在div正在改变他们的颜色，但他们没有根据颜色排序。我试图在它们之前添加它们，然后它不符合预期。

我正在努力奋斗：我无法根据颜色对div进行排序。欢迎任何想法！以下是补充

createDiv_111(5100);

function createDiv_111(num) {

  if (num >= 5000 && num <= 5300) {

    var resize_to_red = document.getElementById('box0');

    resize_to_red.classList.add("reddivs");
    resize_to_red.innerHTML = "ERROR";

    $("#divs_container").prepend(document.getElementById('yellow_reach_limit_box'));
  } else if (num >= 20 && num <= 30) {

    var resize_to_orange = document.getElementById('box0');

    resize_to_orange.classList.add("orangedivs");
    resize_to_orange.innerHTML = "changed to orange";
    $("#divs_container").prepend(document.getElementById('yellow_reach_limit_box'));
  } else if (num >= 30 && num <= 40) {

    var resize_to_green = document.getElementById('box0');


    resize_to_green.classList.add("greendivs");
    resize_to_green.innerHTML = "changed to green";

  }
}

.reddivs {
  position: relative;
  top: 15px;
  width: 590px;
  height: 155px;
  background: #BE0A26;
  padding: 10px;
  border-radius: 15px;
  font-family: Helvetica, Arial;
  font-weight: bold;
  float: left;
  color: white;
  text-align: center;
  margin: 10px 25px 10px 23px;
}

.orangedivs {
  position: relative;
  top: 30px;
  line-height: 26px;
  width: 151px;
  height: 109.5px;
  background: #E86B0B;
  padding: 10px;
  border-radius: 15px;
  font-family: Helvetica, Arial;
  font-weight: bold;
  color: white;
  text-align: center;
  float: left;
  margin: 10px 26px 10px 23px;
}

.greendivs {
  position: relative;
  top: 35px;
  width: 140px;
  height: 70px;
  background: #00A096;
  padding: 10px;
  border-radius: 15px;
  font-family: Helvetica, Arial;
  font-weight: bold;
  color: white;
  text-align: center;
  float: left;
  margin: 40px 30px 20px 24px;
}

.container_for_alldivs {
  width: 660px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container_for_alldivs" id="divs_container">
  <div id="box0" class="alldivs"></div>
  <div id="box1" class="alldivs"></div>
  <div id="box2" class="alldivs"></div>
  <div id="box3" class="alldivs"></div>
  <div id="box4" class="alldivs"></div>
  <div id="box5" class="alldivs"></div>
</div>

我发布了box0 div的代码，但剩余div的条件相同，只是id更改为box1或box2，...，box5

Answer 1

如果你真的想按css类别名称排序（我发现有点黑客攻击）你可以抓住所有元素并按className属性对它们进行排序。

简单示例：

$('#sort').on('click', function() {
  var sortedElements = $('.greendivs, .orangedivs, .reddivs').sort(function(a, b) {
    debugger
    return a.className > b.className;
  });

  $('.container_for_alldivs').html(sortedElements);
});

.reddivs {
  position: relative;
  top: 15px;
  width: 590px;
  height: 155px;
  background: #BE0A26;
  padding: 10px;
  border-radius: 15px;
  font-family: Helvetica, Arial;
  font-weight: bold;
  float: left;
  color: white;
  text-align: center;
  margin: 10px 25px 10px 23px;
}

.orangedivs {
  position: relative;
  top: 30px;
  line-height: 26px;
  width: 151px;
  height: 109.5px;
  background: #E86B0B;
  padding: 10px;
  border-radius: 15px;
  font-family: Helvetica, Arial;
  font-weight: bold;
  color: white;
  text-align: center;
  float: left;
  margin: 10px 26px 10px 23px;
}

.greendivs {
  position: relative;
  top: 35px;
  width: 140px;
  height: 70px;
  background: #00A096;
  padding: 10px;
  border-radius: 15px;
  font-family: Helvetica, Arial;
  font-weight: bold;
  color: white;
  text-align: center;
  float: left;
  margin: 40px 30px 20px 24px;
}

.container_for_alldivs {
  width: 660px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sort">Sort</button>
<div class="container_for_alldivs" id="divs_container">

  <div id="box0" class="alldivs">

  </div>


  <div id="box1" class="alldivs greendivs">

  </div>


  <div id="box2" class="alldivs orangedivs">

  </div>


  <div id="box3" class="alldivs reddivs">

  </div>


  <div id="box4" class="alldivs greendivs">

  </div>


  <div id="box5" class="alldivs reddivs">

  </div>

</div>

Answer 2

flexbox受到广泛支持，您也可以使用它来仅使用css对div进行重新排序：

只需将以下内容添加到您的容器中：

  display: flex;
  flex-direction: column;

并添加div的顺序，如下所示：

order: 3;

我还更新了你的脚本以遍历所有框并从数组中取一个随机数来测试它。

绿色div总是第一个，然后是橙色第二个，最后是红色第三个。更新css以指定所需的顺序。

实施例

//options array
var options = [25, 35, 5250];

$(".alldivs").each(function(i, box)
{
  //get random number from array
  var number = options[Math.floor(Math.random()*options.length)];
  createDiv_111(number, box);
});


function createDiv_111(num, box) 
{
  if (num >= 5000 && num <= 5300) 
  {
    var resize_to_red = box;
    resize_to_red.classList.add("reddivs");
    resize_to_red.innerHTML = "ERROR";
  } 
  else if (num >= 20 && num <= 30) 
  {
    var resize_to_orange = box;
    resize_to_orange.classList.add("orangedivs");
    resize_to_orange.innerHTML = "changed to orange";
  } 
  else if (num >= 30 && num <= 40) 
  {
    var resize_to_green = box;
    resize_to_green.classList.add("greendivs");
    resize_to_green.innerHTML = "changed to green";
  }
}

.reddivs, .orangedivs,.greendivs {
  /* No need to repeat these */
  position: relative;
  padding: 10px;
  border-radius: 15px;
  font-family: Helvetica, Arial;
  font-weight: bold;
  text-align: center;
  float: left;
  color: white;
}

.reddivs {
  top: 15px;
  width: 590px;
  height: 155px;
  background: #BE0A26;
  margin: 10px 25px 10px 23px;
  order: 3;
}

.orangedivs {
  top: 30px;
  line-height: 26px;
  width: 151px;
  height: 109.5px;
  background: #E86B0B;
  margin: 10px 26px 10px 23px;
  order: 2;
}

.greendivs {
  top: 35px;
  width: 140px;
  height: 70px;
  background: #00A096;
  margin: 40px 30px 20px 24px;
  order: 1;
}

.container_for_alldivs {
  display: flex;
  flex-direction: row;
  width: 660px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container_for_alldivs" id="divs_container">
  <div id="box0" class="alldivs"></div>
  <div id="box1" class="alldivs"></div>
  <div id="box2" class="alldivs"></div>
  <div id="box3" class="alldivs"></div>
  <div id="box4" class="alldivs"></div>
  <div id="box5" class="alldivs"></div>
</div>

P.S。我还整理了你的CSS以回收在彩色div之间重复使用的任何样式。