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

时间:2013-03-01 16:50:54

标签: jquery loops for-loop

好的,我有一个函数可以获取藤推文,然后通过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();

            });

2 个答案:

答案 0 :(得分: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]);   

答案 1 :(得分:1)

编辑:

听起来你会想要这样的东西:

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);