Question

我正在使用Google的Feed 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>

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

Answer 1

您已经使用for循环迭代所有结果。

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

e.g。在for循环中打开ul标记

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

并关闭ul代码

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

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

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

1 个答案: