2

私は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>

これを機能させるために何を追加できますか？

4

1 に答える 1

1

すでにループですべての結果を繰り返し処理していforます。

JavaScriptモジュラス演算子を使用して位置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 の各関数を使用して配列を反復処理することができます。

于 2012-12-03T21:45:35.773 に答える