jQuery：包装每 2 个循环附加元素答案

【问题标题】：jQuery: Wrapping every 2 loop-appended elementsjQuery：包装每 2 个循环附加元素
【发布时间】：2012-11-21 10:43:12
【问题描述】：

我正在使用 Google 的提要 API 并尝试以某种方式附加和包装我的标记。我从一个例子开始。

我已经为现有标记找到了许多有关此问题的答案，但我无法将其应用于循环中附加的标记。我怀疑这比我做的要简单，但还没有找到一个优雅的解决方案。

我想将每个 2 个循环的、附加的 <li> 包装成一个 <ul>，如下所示：

<div id="result">
    <ul>
        <li><a ...></li>
        <li><a ...></li>
    </ul>
    <ul>
        <li><a ...></li>
        <li><a ...></li>
    </ul>
    <ul>
        <li><a ...></li>
        <li><a ...></li>
    </ul>
</div>

这是我的简化代码：

<!doctype html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src='http://www.google.com/jsapi?key=[ key ]'></script><script>
    google.load("feeds", "1");
    $(function(){
      var feed = new google.feeds.Feed("[ feed URL ]");
      feed.load(function(result) {
        if (result.error)return;

        $feed = $('#result');

        for (var i = 0; i < 6; i++) {
          var entry = result.feed.entries[i];

          $feed.append(
            '<li>'+
            '<a class="headline" href="'
            + entry.link +
            '">'
            + entry.title +
            '</a><span>'
            + entry.publishedDate + 
            ' | ' 
            + entry.author + 
            '</span></li>'
            );
        }
      });
    });
  </script>
</head>
<body>
  <div class="articles">
    <div id="result">

    </div>
  </div><!-- e .articles -->
</body>
</html>

我可以添加什么来完成这项工作？

【问题讨论】：

标签： jquery loops append

【解决方案1】：

您已经在使用 for 循环遍历所有结果。

您可以使用javascript modulus operator 来检查您是否在位置0、2 或4，并相应地添加<ul> 和</ul> 标签

例如在 for 循环中打开 ul 标签

if (i%2 == 0)
   $feed.append('<ul>' + '<li>' ...);

并关闭ul 标签

if (i%2 == 1)
   $feed.append(... '</li>' + '</ul>');

旁注：更优雅的是，您可以使用jQuery each function 来遍历数组。

【讨论】：