使用 javascript 按特定元素分隔 div

Question

我有以下对象：

var array = [
 { 
   id: 1,
   unit: '1A',
   division: 1
 },
  { 
   id: 2,
   unit: '2A',
   division: 1
 },
  { 
   id: 3,
   unit: '3A',
   division: 1
 },
  { 
   id: 4,
   unit: '4A',
   division: 1
 },
   { 
   id: 5,
   unit: '5A',
   division: 1
 },
  { 
   id: 6,
   unit: '6A',
   division: 1
 },
  { 
   id: 7,
   unit: '1A',
   division: 2
 },
  { 
   id: 8,
   unit: '1B',
   division: 2
 },
  { 
   id: 9,
   unit: '2A',
   division: 2
 },
  { 
   id: 10,
   unit: '2B',
   division: 2
 },
   { 
   id: 11,
   unit: '3A',
   division: 2
 },
  { 
   id: 12,
   unit: '3B',
   division: 2
 }
];

在绘制divs 时，我有以下内容：

.unit{
   float: left;
   border: 1px solid #000000;
   width: 49%;
}

<div>Division 1</div>
<div class="unit">1A</div>
<div class="unit">2A</div>
<div class="unit">3A</div>
<div class="unit">4A</div>
<div class="unit">5A</div>
<div class="unit">6A</div>
<div>Division 2</div>
<div class="unit">1A</div>
<div class="unit">1B</div>
<div class="unit">2A</div>
<div class="unit">2B</div>
<div class="unit">3A</div>
<div class="unit">3B</div>

但我希望它按如下顺序排列：

.unit{
  float: left;
  width: 49%;
  border: 1px solid #000000;
}

<div>Division 1</div>
<div class="unit">1A</div>
<div class="unit">&nbps;</div>
<div class="unit">2A</div>
<div class="unit">&nbps;</div>
<div class="unit">3A</div>
<div class="unit">&nbps;</div>
<div class="unit">4A</div>
<div class="unit">&nbps;</div>
<div class="unit">5A</div>
<div class="unit">&nbps;</div>
<div class="unit">6A</div>
<div class="unit">&nbps;</div>
<div>Division 2</div>
<div class="unit">1A</div>
<div class="unit">1B</div>
<div class="unit">2A</div>
<div class="unit">2B</div>
<div class="unit">3A</div>
<div class="unit">3B</div>

所以我想组织所有左边有字母“A”，右边有字母“B”的变量。

我正在尝试执行以下操作：

var division = [];
var divs     = '';

for(var i in array){
   division.push(array[i].division);
}

division = unique(division);

for(var k in division){
  for(var j in array){
     if(division[k] == array[j].division){
        if(array[j].unit % 2 == 0){
           divs += '<div class="unit">'+array[j].unit+'</div>';
        }else{
           divs += '<div class="unit">'+array[j].unit+'</div>';
        }
     }
  }
}

我希望你能帮助我或给我建议，我该如何解决我的情况。

Answer 1

一种可能的解决方案是使用attribute selector，并检查值是否以“B”结尾。

结合伪元素和CSS attr()，这是按照您的要求订购它们的一种方法，其中一种使用clear 使它们正确地换行。

堆栈sn-p

.unit{
   float: left;
   border: 1px solid #000000;
   width: 49%;
   clear: left;
}
.unit[data-value$="B"]{
   float: right;
   clear: right;
}
.unit::before{
  content: attr(data-value);
}
div:not([data-value]){  /* clear the float for the headers */
  clear: both;
}

<div>Division 1</div>
<div class="unit" data-value="1A"></div>
<div class="unit" data-value="2A"></div>
<div class="unit" data-value="3A"></div>
<div class="unit" data-value="4A"></div>
<div class="unit" data-value="5A"></div>
<div class="unit" data-value="6A"></div>
<div>Division 2</div>
<div class="unit" data-value="1A"></div>
<div class="unit" data-value="1B"></div>
<div class="unit" data-value="2A"></div>
<div class="unit" data-value="2B"></div>
<div class="unit" data-value="3A"></div>
<div class="unit" data-value="3B"></div>

---

另一种方法是使用您的脚本向带有“B”的元素添加一个独特的类。

堆栈sn-p

.unit{
   float: left;
   border: 1px solid #000000;
   width: 49%;
   clear: left;
}
.unit.right{
   float: right;
   clear: right;
}
div:not(.unit){  /* clear the float for the headers */
  clear: both;
}

<div>Division 1</div>
<div class="unit">1A</div>
<div class="unit">2A</div>
<div class="unit">3A</div>
<div class="unit">4A</div>
<div class="unit">5A</div>
<div class="unit">6A</div>
<div>Division 2</div>
<div class="unit">1A</div>
<div class="unit right">1B</div>
<div class="unit">2A</div>
<div class="unit right">2B</div>
<div class="unit">3A</div>
<div class="unit right">3B</div>

---

这是上面的第一个，带有sorts the object array 部门的脚本。

请注意，如果要支持旧版浏览器/IE11，您需要将arrow function => 更改为标准的，并且可能将for...of 更改为常规的for。

堆栈sn-p

var array = [{
    id: 1,
    unit: '1A',
    division: 1
  },
  {
    id: 2,
    unit: '2A',
    division: 1
  },
  {
    id: 3,
    unit: '3A',
    division: 1
  },
  {
    id: 4,
    unit: '4A',
    division: 1
  },
  {
    id: 5,
    unit: '5A',
    division: 1
  },
  {
    id: 6,
    unit: '6A',
    division: 1
  },
  {
    id: 7,
    unit: '1A',
    division: 2
  },
  {
    id: 8,
    unit: '1B',
    division: 2
  },
  {
    id: 9,
    unit: '2A',
    division: 2
  },
  {
    id: 10,
    unit: '2B',
    division: 2
  },
  {
    id: 11,
    unit: '3A',
    division: 2
  },
  {
    id: 12,
    unit: '3B',
    division: 2
  }
];

array.sort((a, b) => a.division - b.division);

var divs = "", lastitem;

for (var item of array) {
    if (item.division != lastitem) {
      divs += '<div class="division">Division ' + item.division + '</div>';
    }
    divs += '<div class="unit" data-value="' + item.unit + '"></div>';
    lastitem = item.division;
}

document.body.innerHTML = divs;

.unit{
   float: left;
   border: 1px solid #000000;
   width: 49%;
   clear: left;
}
.unit[data-value$="B"]{
   float: right;
   clear: right;
}
.unit::before{
  content: attr(data-value);
}
.division{  /* clear the float for the headers */
  clear: both;
}

Answer 2

var array = [
 { 
   id: 1,
   unit: '1A',
   division: 1
 },
  { 
   id: 2,
   unit: '2A',
   division: 1
 },
  { 
   id: 3,
   unit: '3A',
   division: 1
 },
  { 
   id: 4,
   unit: '4A',
   division: 1
 },
   { 
   id: 5,
   unit: '5A',
   division: 1
 },
  { 
   id: 6,
   unit: '6A',
   division: 1
 },
  { 
   id: 7,
   unit: '1A',
   division: 2
 },
  { 
   id: 8,
   unit: '1B',
   division: 2
 },
  { 
   id: 9,
   unit: '2A',
   division: 2
 },
  { 
   id: 10,
   unit: '2B',
   division: 2
 },
   { 
   id: 11,
   unit: '3A',
   division: 2
 },
  { 
   id: 12,
   unit: '3B',
   division: 2
 }
];

const div1Array = array.filter(item=>item.division===1);
const div2Array =array.filter(item=>item.division===2);

window.onload = function () {
 createSections(div1Array,1);
 createSections(div2Array,2);
}

function createSections (array,item) {
var container = document.querySelector(".container");
var header1 = document.createElement('header');
header1.innerText=`div${item}`;
if (div1Array.length>0){
container.appendChild(header1);
for(const item of div1Array){
  var div =document.createElement('div');
  div.className="unit";
  div.innerText = item.id;
  container.appendChild(div);
}
}
}

<section class="container">
</section>