划分对象并在x元素之前和之后环绕

时间：2015-05-10 13:51:01

标签： javascript jquery arrays

我有一系列JavaScript机场。

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

我想要做的是构造一个接收数组的函数，然后在每8个函数中将它包装在<ul>元素中，然后将其附加到现有的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>" ]; DOM元素。

示例array = 

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

预期产出.. 

</li>

我预见到的问题是，如果列表不是8的倍数，你如何在最终{{1}}中添加逻辑进行编程？

3 个答案:

答案 0 :(得分：3)

创建<li>，将其附加到<body>，然后最多添加8个<span>。 8之后，添加另一个<li>并将下一批<span>添加到新<li>，然后继续这样做。剩余的<span>将自动以最后<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>

答案 1 :(得分：1)

试试这个（http://jsfiddle.net/sergdenisov/c855rzx6/）：

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

答案 2 :(得分：1)

解决问题的方法之一是：

// 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 Fiddle demo

参考文献：

相关问题
最新问题