Javascript 在使用for循环时，如何防止json数据反转？

我在尝试使用循环创建下一页/上一页时遇到了一些问题。
单击向下箭头按钮显示

但当点击向上箭头按钮时，我希望它返回到

但是它是相反的，使用reverse（）似乎不起作用

有人能帮我吗

这是我的密码

var newsSubject = new Array();
var newsURL = new Array();

$.ajax({
    async: true,
    url: 'https://api.myjson.com/bins/2nqki',
    data: '',
    accepts: 'application/json',
    dataType: 'json',
    success: function(data) {
        var obj = data.Data;
        var output = '<ul>';
        var index = 0;
        for(var i = 0; i < obj.length; i++) {
            newsSubject.push(data.Data[i].Subject);
            newsURL.push(data.Data[i].Url);
        }          
        for(var k = 0; k < 5; k++) {
            output += '<li class="news-post"> <a href="' + newsURL[index] + '" data-tag="exclusive">' + newsSubject[index] + '</a> </li>';
            index = (index + 1);
        } 
        output += '</ul>'
        $('.news-array').html(output);
        $('.next-news').click(function(e){
            $('.news-post').each(function(){
                if (index < obj.length) {
                    index = index + 1;
                    $(this).find('a').html(newsSubject[index - 1]);
                }  
            });
            return false;
        });
        $('.prev-news').click(function(e){
            $('.news-post').each(function(){
                if(index != 0) {
                    index = index - 1;
                    $(this).find('a').html(newsSubject[index - 5]);
                }
             });
            return false;
        });               
    }
});

var newsubject=newarray（）；
var newsURL=新数组（）；
$.ajax({
async:true，
网址：'https://api.myjson.com/bins/2nqki',
数据：“”，
接受：“application/json”，
数据类型：“json”，
成功：功能（数据）{
var obj=数据。数据；
变量输出=“
”；
var指数=0；
对于（变量i=0；i'
$（'.news array'）.html（输出）；
$（'.next news'）。单击（函数（e）{
$（'.news post'）。每个（函数（）{
if（索引<对象长度）{
指数=指数+1；
$（this.find（'a'）.html（新闻主题[index-1]）；
}  
});
返回false；
});
$（'.prev news'）。单击（函数（e）{
$（'.news post'）。每个（函数（）{
如果（索引！=0）{
指数=指数-1；
$（this.find（'a'）.html（新闻主题[index-5]）；
}
});
返回false；
});               
}
});

这是jsfiddle

---

您只需反转jQuery对象的方向

$（$（'.news post'）.get（）.reverse（））.each（函数（）{/*您的代码*/}）

查看下面的代码片段以获取演示


var newsubject=newarray（）；
var newsURL=新数组（）；
$.ajax({
async:true，
网址：'https://api.myjson.com/bins/2nqki',
数据：“”，
接受：“application/json”，
数据类型：“json”，
成功：功能（数据）{
var obj=数据。数据；
变量输出=“
”；
var指数=0；
对于（变量i=0；i'
$（'.news array'）.html（输出）；
$（'.next news'）。单击（函数（e）{
$（'.news post'）。每个（函数（）{
if（索引<对象长度）{
指数=指数+1；
$（this.find（'a'）.html（新闻主题[index-1]）；
}  
});
返回false；
});
$（'.prev news'）。单击（函数（e）{
$（$（'.news post'）.get（）.reverse（））.each（函数（）{
如果（索引！=0）{
指数=指数-1；
$（this.find（'a'）.html（新闻主题[index-5]）；
}
});
返回false；
});               
}
});
。新闻列表{
高度：自动；
-moz边框右上角半径：25px；
-o-边界-右上-半径：25px；
-webkit边框右上角半径：25px；
边框右下半径：25px；
-moz边框右下半径：25px；
-o-边界-底部-右侧-半径：25px；
-webkit边框右下半径：25px；
溢出：隐藏；
背景：白色；
边框：无；}
.新闻列表{
宽度：100%；
背景：白色；
页边距底部：0；}
.新闻列表ul li.新闻邮报{
填充：20px 22px 0 22px；}
.新闻列表ul li.新闻发布：悬停{
背景：#4A90E2；}
.新闻列表ul li.新闻发布：悬停a{
颜色：白色；
边框底部：1px实心#4A90E2；}
.新闻列表ul li.三角上升{
显示：内联块；
宽度：0；
身高：0；
左边框：15px实心透明；
右边框：15px实心透明；
边框底部：10px实心#9B9B9B；}
.新闻列表ulli a{
显示：块；
颜色：#979797；
垫底：20px；
边框底部：1px实心#BBBBBB；}
.新闻列表ul li.三角下降{
显示：内联块；
宽度：0；
身高：0；
左边框：15px实心透明；
右边框：15px实心透明；
边框顶部：10px实心#9B9B9B；}
.新闻列表ul.下一个李{
填充：0 22px；}
.新闻列表ul.下一个李a{
边界：无；
填充底部：0；
填充：10px 0；}
.新闻列表ul.下一个李：悬停{
背景：#4A90E2；}
.新闻列表ul.下一个李：悬停a{
颜色：白色；
边框底部：1px实心#4A90E2；}
.新闻列表ul.上一页{
填充：0 22px；}
.新闻列表ul.prev li a{
边框底部：1px实心#BBBBBB；
填充底部：0；
填充：10px 0；}
.新闻列表ul.上一页李：悬停{
背景：#4A90E2；}
.新闻列表ul.上一页李：悬停a{
颜色：白色；
边框底部：1px实心#4A90E2；}
李{
列表样式：无；
}






正如@Pointy所说，您正在向后迭代

您只需先减去索引，然后向前迭代：

    $('.prev-news').click(function(e){
        if (index < 10)
            return false;
        index -= 10;
        $('.news-post').each(function(){
            if (index < obj.length) {
                index++;
                $(this).find('a').html(newsSubject[index - 1]);
            }
         });
        return false;
    });

以下是更新后的JSFIDLE:
首先，您的后退步骤出错了。你在倒计时
index=index-1
因此，一切都将是相反的

另一方面，您没有使用干净的结构化代码。在您的情况下，只要您需要，您就可以做一些事情，然后尝试调试和更改它。尤其是不要改变链接太多

下面是一个重写代码的简单示例。请注意将功能划分为简单功能

尽量不要做一些不必要的DOM操作，比如在函数中创建元素，在循环中更改另一个函数中的一些链接和文本。尽量保持干燥（不要重复）

//封装前端内容。这里创建一些html作为cl
var newsSubject = new Array();
var newsURL = new Array();

$.ajax({
    async: true,
    url: 'https://api.myjson.com/bins/2nqki',
    data: '',
    accepts: 'application/json',
    dataType: 'json',
    success: function(data) {
        var obj = data.Data;
        var output = '<ul>';
        var index = 0;
        for(var i = 0; i < obj.length; i++) {
            newsSubject.push(data.Data[i].Subject);
            newsURL.push(data.Data[i].Url);
        }          
        for(var k = 0; k < 5; k++) {
            output += '<li class="news-post"> <a href="' + newsURL[index] + '" data-tag="exclusive">' + newsSubject[index] + '</a> </li>';
            index = (index + 1);
        } 
        output += '</ul>'
        $('.news-array').html(output);
        $('.next-news').click(function(e){
            $('.news-post').each(function(){
                if (index < obj.length) {
                    index = index + 1;
                    $(this).find('a').html(newsSubject[index - 1]);
                }  
            });
            return false;
        });
        $('.prev-news').click(function(e){
            $('.news-post').each(function(){
                if(index != 0) {
                    index = index - 1;
                    $(this).find('a').html(newsSubject[index - 5]);
                }
             });
            return false;
        });               
    }
});

    $('.prev-news').click(function(e){
        if (index < 10)
            return false;
        index -= 10;
        $('.news-post').each(function(){
            if (index < obj.length) {
                index++;
                $(this).find('a').html(newsSubject[index - 1]);
            }
         });
        return false;
    });

$(this).find('a').attr('href', newsURL[index - 1]);

// encapsulate frontend stuff. here create some html as clean it can be.
function createListElements(data, index, end){     
    var output = '';
    while(index < end) {
        output += '<li class="news-post"><a href="' + data.Data[index].Url + '" data-tag="exclusive">' + data.Data[index].Subject + '</a></li>';
        index +=  1;
    } 
    return '<ul>' + output + '</ul>';
}
// do update the view - in this case, change everything under ".news-array"
function updateView(data, elementPerView, index){    
    var begin = Math.max(0, index);
    var end = Math.min(data.Data.length, begin + elementPerView); 
    $('.news-array').html( createListElements(data, begin, end) );
    return begin;
}
// frontend button handler
function buttonHandler(data) {
    var index = 0;
    updateView(data, elementPerView, index);
    $('.next-news').click(function(e){
        // sorry, we need one look ahead
        if (index + elementPerView < data.Data.length)
            index = updateView(data, elementPerView, index + elementPerView);
        return false;
    });
    $('.prev-news').click(function(e){
        index = updateView(data, elementPerView, index - elementPerView);
        return false;
    });               
}

var elementPerView = 4; // be flexible - 4 is a good example for 15 elements

// do some ajax - not mixed up with callback-code
$.ajax({
    async: true,
    url: 'https://api.myjson.com/bins/2nqki',
    data: '',
    accepts: 'application/json',
    dataType: 'json',
    success: buttonHandler
});