在X元素之前和之后划分对象并在X元素之后包裹

我有一个机场的JavaScript数组。

此数组将在PHP中动态生成，因此其长度可能会改变。我知道的唯一固定变量是一次在屏幕上显示多少。（8）。

我想做的是构建一些功能，即在数组中占用，每8个将其包装在<li>元素中，然后将其插入现有的<ul> DOM元素。

。

示例array =

var airports = [ //Array of airports, location ID/Display name
    "<span data-aid='LON'>London - All</span>",
    "<span data-aid='ABZ'>Aberdeen</span>",
    "<span data-aid='BHD'>Belfast Harbour</span>",
    "<span data-aid='BFS'>Belfast - International</span>",
    "<span data-aid='BHX'>Birmingham</span>",
    "<span data-aid='BOH'>Bournemouth</span>",
    "<span data-aid='BRS'>Bristol</span>",
    "<span data-aid='CWL'>Cardiff</span>",
    "<span data-aid='EMA'>East Midlands</span>",
    "<span data-aid='EDI'>Edinburgh</span>",
    "<span data-aid='EXT'>Exeter</span>",
    "<span data-aid='GLA'>Glasgow Intl</span>",
    "<span data-aid='HUY'>Humberside</span>",
    "<span data-aid='LBA'>Leeds Bradford</span>",
    "<span data-aid='LPL'>Liverpool</span>",
    "<span data-aid='LCY'>London - City</span>",
    "<span data-aid='LGW'>London - Gatwick</span>",
    "<span data-aid='LHR'>London - Heathrow</span>",
    "<span data-aid='LTN'>London - Luton</span>",
    "<span data-aid='SEN'>London - Southend</span>",
    "<span data-aid='STN'>London - Stansted</span>",
    "<span data-aid='QQS'>London - St Pancras</span>",
    "<span data-aid='MAN'>Manchester</span>",
    "<span data-aid='NCL'>Newcastle</span>",
    "<span data-aid='NWI'>Norwich</span>",
    "<span data-aid='SOU'>Southampton</span>"
];

预期输出..

<li>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</li> <!-- Continues -->

我预见到的问题是，如果列表不是八个列表，则如何在逻辑中编程以在最终的</li>中添加？

创建一个<li>，将其附加到<body>，然后添加<span> s的最多8个。8之后，将另一个<li>附加，然后将下一批<span> s添加到新的<li>中，然后继续这样做。其余的<span> S将自动最终进入最后一个<li>。

我在演示中添加了一些CSS以效果。希望你不介意。

var airports = [ //Array of airports, location ID/Display name
  "<span data-aid='LON'>London - All</span>",
  "<span data-aid='ABZ'>Aberdeen</span>",
  "<span data-aid='BHD'>Belfast Harbour</span>",
  "<span data-aid='BFS'>Belfast - International</span>",
  "<span data-aid='BHX'>Birmingham</span>",
  "<span data-aid='BOH'>Bournemouth</span>",
  "<span data-aid='BRS'>Bristol</span>",
  "<span data-aid='CWL'>Cardiff</span>",
  "<span data-aid='EMA'>East Midlands</span>",
  "<span data-aid='EDI'>Edinburgh</span>",
  "<span data-aid='EXT'>Exeter</span>",
  "<span data-aid='GLA'>Glasgow Intl</span>",
  "<span data-aid='HUY'>Humberside</span>",
  "<span data-aid='LBA'>Leeds Bradford</span>",
  "<span data-aid='LPL'>Liverpool</span>",
  "<span data-aid='LCY'>London - City</span>",
  "<span data-aid='LGW'>London - Gatwick</span>",
  "<span data-aid='LHR'>London - Heathrow</span>",
  "<span data-aid='LTN'>London - Luton</span>",
  "<span data-aid='SEN'>London - Southend</span>",
  "<span data-aid='STN'>London - Stansted</span>",
  "<span data-aid='QQS'>London - St Pancras</span>",
  "<span data-aid='MAN'>Manchester</span>",
  "<span data-aid='NCL'>Newcastle</span>",
  "<span data-aid='NWI'>Norwich</span>",
  "<span data-aid='SOU'>Southampton</span>"
];
var container = $("body");
var wrapAt = 8;
var currLi = $("<li>");
container.append(currLi);
for (var i = 0; i < airports.length; i++) {
  currLi.append(airports[i]);
  if ((i + 1) % wrapAt == 0) {
    currLi = $("<li>");
    container.append(currLi);
  }
}

span {
  margin: 5px;
  background-color: lightblue;
}
li {
  min-width: 1000px;
}

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

尝试此（http://jsfiddle.net/sergdenisov/c8555rzx6/）：

var airports = [ //Array of airports, location ID/Display name
    "<span data-aid='LON'>London - All</span>",
    "<span data-aid='ABZ'>Aberdeen</span>",
    "<span data-aid='BHD'>Belfast Harbour</span>",
    "<span data-aid='BFS'>Belfast - International</span>",
    "<span data-aid='BHX'>Birmingham</span>",
    "<span data-aid='BOH'>Bournemouth</span>",
    "<span data-aid='BRS'>Bristol</span>",
    "<span data-aid='CWL'>Cardiff</span>",
    "<span data-aid='EMA'>East Midlands</span>",
    "<span data-aid='EDI'>Edinburgh</span>",
    "<span data-aid='EXT'>Exeter</span>",
    "<span data-aid='GLA'>Glasgow Intl</span>",
    "<span data-aid='HUY'>Humberside</span>",
    "<span data-aid='LBA'>Leeds Bradford</span>",
    "<span data-aid='LPL'>Liverpool</span>",
    "<span data-aid='LCY'>London - City</span>",
    "<span data-aid='LGW'>London - Gatwick</span>",
    "<span data-aid='LHR'>London - Heathrow</span>",
    "<span data-aid='LTN'>London - Luton</span>",
    "<span data-aid='SEN'>London - Southend</span>",
    "<span data-aid='STN'>London - Stansted</span>",
    "<span data-aid='QQS'>London - St Pancras</span>",
    "<span data-aid='MAN'>Manchester</span>",
    "<span data-aid='NCL'>Newcastle</span>",
    "<span data-aid='NWI'>Norwich</span>",
    "<span data-aid='SOU'>Southampton</span>"
];
processAirports(airports);
function processAirports(arr) {
    if (!arr.length) {
        return;
    }
    var $container = $('.js-container');
    var count = 0;
    var $li;
    for (var i = 0; i < arr.length; i++) {
        $li = (count === 0) ? $('<li></li>') : $li;
        $li.append(arr[i]);
        if (count === 7) {
            $container.append($li);
            count = 0;
            continue;
        }
        count++;
    }
}

解决问题的一种方法是：

// a named function taking two arguments,
// n, Number or String: defining the group-size,
// arr, Array: the array whose elements you want
//             to group together
function groupsOf(n, arr) {
  // if n is undefined, we use the default of 8,
  // otherwise we call parseInt() to ensure the
  // we have a number (this is a naive check, as
  // we're not checking that the supplied argument is
  // either a Number or String; nor are we validating
  // the existence of the Array):
  n = 'undefined' === typeof n ? 8 : parseInt(n, 10);
  // initialising an array to hold the grouped elements:
  var grouped = [];
  // iterating over the supplied Array, using 
  // Array.prototype.forEach():
  arr.forEach(function(arrayElem, index) {
    // the first variable (here: 'arrayElem') is the current 
    // array-element of the array over which we're iterating,
    // the second (here: 'index') is the index of the current
    // array-element from the array over which we're iterating.
    // if the remainder of the index divided by the group-size
    // is not zero, we add the current array-element to the
    // last child-array of the grouped array:
    if (index % n !== 0) {
      grouped[grouped.length - 1].push(arrayElem);
    } else {
      // otherwise we add a new child-array, containing
      // the current array-element, to that grouped array:
      grouped.push([arrayElem]);
    }
  });
  // returning the grouped array:
  return grouped;
}
var airports = [/* array removed for brevity */]
// a reference to the element to which we're adding the groups:
var list = document.getElementById('airports'),
  // creating an <li> element:
  li = document.createElement('li'),
  // creating a document fragment:
  fragment = document.createDocumentFragment(),
  // creating an 'empty' variable for use within the
  // (later) loop:
  clone;
// calling the function, iterative over the the returned array:
groupsOf(8, airports).forEach(function(group) {
  // cloning the created <li>, storing it in the clone variable:
  clone = li.cloneNode();
  // setting the innerHTML of the clone to the joined together
  // string of HTML held within the current array-element,
  // using Array.prototype.join():
  clone.innerHTML = group.join('');
  // appending the clone to the document fragment:
  fragment.appendChild(clone);
});
// appending the document fragment to the list element:
list.appendChild(fragment);

function groupsOf(n, arr) {
  n = 'undefined' === typeof n ? 8 : parseInt(n, 10);
  var grouped = [];
  arr.forEach(function(arrayElem, index) {
    if ((index) % n !== 0) {
      grouped[grouped.length - 1].push(arrayElem);
    } else {
      grouped.push([arrayElem]);
    }
  });
  return grouped;
}
var airports = [ //Array of airports, location ID/Display name
  "<span data-aid='LON'>London - All</span>",
  "<span data-aid='ABZ'>Aberdeen</span>",
  "<span data-aid='BHD'>Belfast Harbour</span>",
  "<span data-aid='BFS'>Belfast - International</span>",
  "<span data-aid='BHX'>Birmingham</span>",
  "<span data-aid='BOH'>Bournemouth</span>",
  "<span data-aid='BRS'>Bristol</span>",
  "<span data-aid='CWL'>Cardiff</span>",
  "<span data-aid='EMA'>East Midlands</span>",
  "<span data-aid='EDI'>Edinburgh</span>",
  "<span data-aid='EXT'>Exeter</span>",
  "<span data-aid='GLA'>Glasgow Intl</span>",
  "<span data-aid='HUY'>Humberside</span>",
  "<span data-aid='LBA'>Leeds Bradford</span>",
  "<span data-aid='LPL'>Liverpool</span>",
  "<span data-aid='LCY'>London - City</span>",
  "<span data-aid='LGW'>London - Gatwick</span>",
  "<span data-aid='LHR'>London - Heathrow</span>",
  "<span data-aid='LTN'>London - Luton</span>",
  "<span data-aid='SEN'>London - Southend</span>",
  "<span data-aid='STN'>London - Stansted</span>",
  "<span data-aid='QQS'>London - St Pancras</span>",
  "<span data-aid='MAN'>Manchester</span>",
  "<span data-aid='NCL'>Newcastle</span>",
  "<span data-aid='NWI'>Norwich</span>",
  "<span data-aid='SOU'>Southampton</span>"
];
var list = document.getElementById('airports'),
  li = document.createElement('li'),
  fragment = document.createDocumentFragment(),
  clone;
groupsOf(8, airports).forEach(function(group) {
  clone = li.cloneNode();
  clone.innerHTML = group.join('');
  fragment.appendChild(clone);
});
list.appendChild(fragment);

li {
  margin: 0 0 0.5em 0;
  width: 80%;
  counter-reset: spanCount;
}
span {
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
  border: 1px solid #000;
  counter-increment: spanCount;
}
span::before {
  content: counter(spanCount);
  color: #f90;
  margin-right: 0.2em;
}

<ul id="airports"></ul>

Js小提琴演示。

参考：

Array.prototype.forEach()。
Array.prototype.join()。
Array.prototype.push()。
document.getElementById()。
document.createDocumentFragment。
document.createElement。
Element.innerHTML。
Node.cloneNode()。

相关内容

最新更新

热门标签：