JQuery 使用 .each() 循环输出缓冲区

Question

好的，我有一个函数可以获取 vine 推文，然后通过 iFrame 显示视频。这很好用，唯一的问题是我不想一次列出它们，我只想显示一个，然后在完成后显示下一个。这可能很简单，但我一直在看代码很长时间，现在我想不通。请帮忙。

         function getTweets() {
                    var url='http://search.twitter.com/search.json?callback=?&q=givingvine';
                    $.getJSON(url,function(json){

                    //setup an array to buffer output
                    var output = [];

                    //a for loop will perform faster when setup like this
                    for (var i = 0, len = json.results.length; i < len; i++) {
                   //instead of appending each result, add each to the buffer array
                   output.push('<p>' + '<iframe class="video" src="' + json.results[i].text.substr(json.results[i].text.indexOf("http")) +'" frameborder="0" width="1080" height="800" style="margin:-155px -100px -130px -60px;"></iframe>' + '</p>');

                    }

                //now select the #results element only once and append all the output at once, then slide it into view
                  $.each(output, function (intIndex, objValue) {
                    $("#results").html(objValue);
                    });
                });
                }
                 //set an interval to run the getTweets function (30,000 ms is 5 minutes), you can cancel the interval by calling clearInterval(timer);
                 var timer = setInterval(getTweets, 10000);
                clearInterval(timer);
                //run the getTweets function on document.ready
                getTweets();

            });

Answer 1

如果我理解正确，您希望将结果存储在输出中，然后只将第一个结果附加到#results。那么当用户做某事时添加另一个？

我建议您将当前“位置”存储在一个变量中，然后当用户执行您想要添加下一个的操作时，将其增加 1

类似

  var output =[],currentKey =0;
  function getTweets() {
                var url='http://search.twitter.com/search.json?callback=?&q=vine';
                $.getJSON(url,function(json){

                //setup an array to buffer output


                //a for loop will perform faster when setup like this
                for (var i = 0, len = json.results.length; i < len; i++) {
               //instead of appending each result, add each to the buffer array
               output.push('<p>' + '<iframe class="video" src="' + json.results[i].text.substr(json.results[i].text.indexOf("http")) +'" frameborder="0" width="1080" height="800" style="margin:-155px -100px -130px -60px;"></iframe>' + '</p>');

                }

            //now select the #results element only once and append all the output at once, then slide it into view
                $("#results").html(output[currentKey]);
            });
            }

         getTweets();

        $('#next').click(function(){
          currentKey +=1;
          if(currentKey  < output.length){
         $('#results').append(output[currentKey]);   
       }
       });

上面的示例假设您有某种带有 id=next 的按钮，单击该按钮会将下一项附加到结果中，例如

  <button id="next">Next Video</button>

如果要替换当前视频，请使用

        $('#results').html(output[currentKey]);   
       //  instead of
       $('#results').append(output[currentKey]);   

Answer 2

编辑：

听起来你想要这样的东西：

output.push('<p>' + '<iframe id="iframe' + i.toString() + '"  class="video" src="' + json.results[i].text.substr(json.results[i].text.indexOf("http")) +'" frameborder="0" width="1080" height="800" style="margin:-155px -100px -130px -60px;"></iframe>' + '</p>');

                    }

然后在这里：

              $.each(output, function (intIndex, objValue) {
                $("#results").html(objValue);
                //Some Timer code here;
                //Remove previous iframe, add a new iframe
                $('#results').empty();
                });

您也可以更改 forloop 以使用 src 填充输出，然后在 foreach 中执行以下操作：

              $.each(output, function (intIndex, objValue) {
                $("#iframe").attr('src', objValue)
                //Some Timer code here;
                });

---

如果您想在设置中一次显示一个 iframe：

您可能想要使用 each() 函数：

$.each(output, function (intIndex, objValue) {
     $("#results").html(objValue);
});

代替：

$("#results").html(output);