javascript - 使用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
 }
];

绘制 div 时，我有以下内容:

.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 使它们正确换行。

堆栈片段

.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”的元素添加一个独特的类。

堆栈片段

.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。

堆栈片段

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