单独的div通过使用JavaScript的特定元素

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，使他们行打破正常的一种方式。

堆栈段

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

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>