jQuery .each() 乘以“i”？

Question

我正在尝试为一个学校项目制作一种新闻专线，但我在使用 jQuery 的 .each() 函数时遇到了一些问题。我正在尝试找到一种方法来跳过循环中的每个第二个数组元素。

基本上，我有来自 NY Times API 的数据，得到标题和摘要，然后将它们推送到一个数组中，然后我每隔一段时间循环一次并制作动画。

我的问题是，如果不将循环再次移动到 index[1]，我似乎无法找到获取 Title + Abstract (Index[0]+[1]) 的方法。现在我知道在 Javascript 中你可以简单地使用 for (i=0; i < array.length; i+2) 并因此跳过每个第二个数组元素，但我没有任何运气来整合它。有什么建议？ :)

$(document).ready(function() {
var newsWire = [];
    function loadNewswire() {
        return $.getJSON('http://api.nytimes.com/svc/news/v3/content/all/all.json',
        {'api-key': 'XXXXXXXXXXXXXXXXXXX'},
        function(data) {
            console.log(data)
            var newsWireTemp = [];
            for (var i = 0; i < data.results.length; i++) {
                var breakingNews = data.results[i];
                var breakingTitle = breakingNews.title.toUpperCase();
                var breakingAbstract = breakingNews.abstract;
                newsWireTemp.push(breakingTitle);
                newsWireTemp.push(breakingAbstract);
            }
            newsWire = newsWireTemp;
        });
    }
    loadNewswire().done(function () {
        var items = newsWire;
        $text = $('#newswiretxt span'),
        delay = 10; //seconds
        function loop (delay) {
            $.each(items, function (i, elm){
                $text.delay(delay*1E3).fadeOut();
                $text.queue(function(){
                    $text.html(items[i]+ ": " +items[i+1]);
                    $text.dequeue();
                });
                $text.fadeIn();
                $text.queue(function(){
                    if (i == items.length -1) {
                        loop(delay);   
                    }
                $text.dequeue();
                });
            });
        }
        console.log(items.length);
        loop(delay);
        });
});

Answer 1

基本上，只需将所需的文本连接到加载函数的数组中即可。然后，当您迭代时，您可以简单地按原样编写内容，而不会弄乱迭代。

$(document).ready(function() {
   var newsWire = [];
function loadNewswire() {
    return $.getJSON('http://api.nytimes.com/svc/news/v3/content/all/all.json',
    {'api-key': 'XXXXXXXXXXXXXXXXXXX'},
    function(data) {
        console.log(data)
        var newsWireTemp = [];
        for (var i = 0; i < data.results.length; i++) {
            var breakingNews = data.results[i];
            var breakingTitle = breakingNews.title.toUpperCase();
            var breakingAbstract = breakingNews.abstract;
            newsWireTemp.push(breakingTitle + ': ' + breakingAbstract);
        }
        newsWire = newsWireTemp;
    });
}
loadNewswire().done(function () {
    var items = newsWire;
    $text = $('#newswiretxt span'),
    delay = 10; //seconds
    function loop (delay) {
        $.each(items, function (i, elm){
            $text.delay(delay*1E3).fadeOut();
            $text.queue(function(){
                $text.html(items[i]);
                $text.dequeue();
            });
            $text.fadeIn();
            $text.queue(function(){
                if (i == items.length -1) {
                    loop(delay);   
                }
            $text.dequeue();
            });
        });
    }
    console.log(items.length);
    loop(delay);
    });
 });

Answer 2

看看this SO thread对你有没有帮助。

据我了解，您希望跳过所有其他迭代，因此检查 i 的奇偶性以在适当的时候跳过应该可行。

对于懒人：

$.each(array, function(index, item) {
    if(index % 2 === 0) return true; // This would skip
    // Other logic
});

如果有帮助，请告诉我。

Answer 3

不要使用两个数组索引，而是使用一个对象var bn={};，添加两个条目bn.breakingTitle=breakingNews.title.toUpperCase(); 和bn.breakingAbstract=breakingNews.abstract;，然后一推newsWireTemp.push(bn);，因此newsWire 中的每个条目更像newsWire[i].breakingTitle 和newsWire[i].breakingAbstract.

Answer 4

一种方法：

小提琴：http://jsfiddle.net/q18dv4wr/

HTML：

<div id="test1">odds:</div>
<div id="test2">evens:</div>

JS：

var someData = [0,1,2,3,4,5,6,7,8,9,10];
var div1 = $('#test1');
var div2 = $('#test2');
$.each(someData,
    function (index, value) {
        if (index % 2 == 0) {
            return;
        }
        else {
            div1.append(' ' + value);
        }
    }
);
$.each(someData,
    function (index, value) {
        if (index % 2 != 0) {
            return;
        }
        else {
            div2.append(' ' + value);
        }
    }
);

编辑：似乎我发布得太晚了。其他人已经给出了相同的想法。 =] 哦，好吧。

Answer 5

你可以这样做： $text.html(items[i]+ ": " +items[(i+=1)]); 但就我个人而言，我会将 breakNews 对象推送到数组中，而不是为每个属性设置不同的索引：

$(document).ready(function() {
var newsWire = [];
    function loadNewswire() {
        return $.getJSON('http://api.nytimes.com/svc/news/v3/content/all/all.json',
        {'api-key': 'XXXXXXXXXXXXXXXXXXX'},
        function(data) {
            console.log(data)
            var newsWireTemp = [];
            for (var i = 0; i < data.results.length; i++) {
                newsWireTemp.push(data.results[i]);
            }
            newsWire = newsWireTemp;
        });
    }
    loadNewswire().done(function () {
        var items = newsWire;
        $text = $('#newswiretxt span'),
        delay = 10; //seconds
        function loop (delay) {
            $.each(items, function (i, elm){
                $text.delay(delay*1E3).fadeOut();
                $text.queue(function(){
                    $text.html(items[i].title.toUpperCase()+ ": " +items[i].abstract);
                    $text.dequeue();
                });
                $text.fadeIn();
                $text.queue(function(){
                    if (i == items.length -1) {
                        loop(delay);   
                    }
                $text.dequeue();
                });
            });
        }
        console.log(items.length);
        loop(delay);
        });
});

Answer 6

尝试使用 .append() ，在附加 items[i + 1] 之前检查是否定义了 items[i + 1] ，否则返回空字符串

$text.append(items[i] + (!!items[i+1] ?  ":" + items[i+1] + " ": ""))

var items = "abcdefg".split("")

$.each(items, function(i, item) {
  $("body").append(items[i] + (!!items[i+1] ?  ":" + items[i+1] + " ": ""))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>