Javascript 查找下一个/上一个元素

我通过ajax从一行div加载数据，div的类为.gameListing。当其中一个div被单击时，它添加了一个.active类，并将相关数据加载到一个容器中，这一切都很正常

我想要的是有一个Previous&Next链接，找到Next或prev.gameListing并单击它

$('.gameListing').click(function(){

    $('.gameListing').removeClass('active');
    $(this).addClass('active');

    var id = $(this).attr('data-id');
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games";

    call_ajax(url);
});




function call_ajax(url) {

    $.ajax( {
            url: url,
            method: "GET",
            data: {json:  1},
            dataType: "JSON"
     })

        .done(function( data ) {

        // LOAD GAME INFORMATION
        $("#game-name").html(data.post.title);
        $("#game-reels").html(data.post.custom_fields.reels);
        $("#game-paylines").html(data.post.custom_fields.paylines);
        $("#game-minBet").html(data.post.custom_fields.min_bet);
        $("#game-maxBet").html(data.post.custom_fields.max_bet);
        $("#game-jackpot").html(data.post.custom_fields.jackpot);
        $("#game-info").html(data.post.custom_fields.game_info);

        // LOAD GAME PROVIDERS
        var provSource = new String(data.post.custom_fields.game_name);
                provSource = provSource.replace(/ /g,"-");
                $("#game_provs").load("http://localhost:8888/projects/superfreerespo/" + provSource + "/ .gameBox-Ops");

        // LOAD GAME THUMBNALS
        var gameThumbSrc = new String(data.post.custom_fields.game_name);
        gameThumbSrc = gameThumbSrc.replace(/ /g,'');

        $('#gameBoxGallery').html('');
            for(i = 0;  i<= 2; i++){
                            image = '<img src="<?php bloginfo('template_directory'); ?>/images/games/screenshots/' + gameThumbSrc + '-' + i + '.jpg" class="gameThumb">'
                            $('#gameBoxGallery').append(image);
        };

        // ZOOM FIRST THUMBNAIL
        $('#gameBox-Screenshot').html('');
            image = '<img src="<?php bloginfo('template_directory'); ?>/images/games/screenshots/' + gameThumbSrc + '-0' + '.jpg" id="gameScreenshot">'
        $('#gameBox-Screenshot').append(image);

        })  
}

$（'.gameListing'）。单击（函数（）{
$（'.gameListing'）.removeClass（'active'）；
$（this.addClass（'active'）；
var id=$（this.attr（'data-id'）；
变量url=”http://localhost:8888/projects/superfreerespo/“+id+”？json=get_category_posts&slug=games”；
调用ajax（url）；
});
函数调用\u ajax（url）{
$.ajax（{
url:url，
方法：“获取”，
数据：{json:1}，
数据类型：“JSON”
})
.完成（功能（数据）{
//加载游戏信息
$（“#游戏名”）.html（data.post.title）；
$（“#游戏卷轴”）.html（data.post.custom_fields.revels）；
$（“#游戏付款线”）.html（data.post.custom_fields.paylines）；
$（“#game minBet”）.html（data.post.custom_fields.min_bet）；
$（“#game maxBet”）.html（data.post.custom_fields.max_bet）；
$（“#游戏大奖”）.html（data.post.custom_fields.jackpot）；
$（“#游戏信息”）.html（data.post.custom_fields.game_info）；
//加载游戏提供商
var provSource=新字符串（data.post.custom\u fields.game\u name）；
provSource=provSource.replace（//g，“-”）；
$（“#游戏证明”）。加载（“http://localhost:8888/projects/superfreerespo/“+provSource+”/.gameBox Ops”）；
//加载游戏拇指
var gameThumbSrc=新字符串（data.post.custom\u fields.game\u name）；
gameThumbSrc=gameThumbSrc.replace（//g'，）；
$（'#gameBoxGallery'）.html（''）；
对于（i=0；i这样的事情怎么样：

$('.prev').click(function(){

    var $current = $('.gameListing .active');
    $current.removeClass('active')
    $current.prev().addClass('active');

    var id = $current.prev().attr('data-id');
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games";

    call_ajax(url);
});

$('.next').click(function(){

    var $current = $('.gameListing .active');
    $current.removeClass('active')
    $current.next().addClass('active');

    var id = $current.next().attr('data-id');
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games";

    call_ajax(url);
});

更新

如果要使用泛型函数，请执行以下操作：

$('.prev').click(function(){
     Navigate('previous');
});

$('.next').click(function(){
     Navigate('next');
});


function Navigate (direction){
    var $current = $('.gameListing .active');
    $current.removeClass('active')

    var secondItem = $current.next().addClass('active');
    if(direction == 'previous')
         secondItem = $current.prev().addClass('active');

    var id = secondItem.attr('data-id');
    var url = "http://localhost:8888/projects/superfreerespo/" + id + "?json=get_category_posts&slug=games";

    call_ajax(url);

}

您可以使用Jquery中的.next（）

有关更多详细信息&供以前使用。prev（）
如果您的
.gameListing
不相邻（因此如果
next（）
和
prev（）
不起作用），这里有一个解决方案：

如果代码段不起作用


jQuery.fn.reverse=函数（）{
返回this.pushStack（this.get（）.reverse（），参数）；
};
函数列表（el）{
$（'.gameListing'）.removeClass（'active'）；
$（el）.addClass（“活动”）；
变量id=$（el.attr（'data-id'）；
变量url=”http://localhost:8888/projects/superfreerespo/“+id+”？json=get_category_posts&slug=games”；
//调用ajax（url）；
$（'#result'）.text（'URL:'+URL）；
}
$（'.gameListing'）。单击（函数（）{
游戏列表（本）；
});
$（'.prev'）。单击（函数（）{
var-next=false；
$（'.gameListing'）.reverse（）.each（函数（）{
如果（下一个）{
游戏列表（本）；
返回false；
}
if（$（this）.hasClass（'active'））{
next=真；
}
});
});
$（'.next'）。单击（函数（）{
var-next=false；
$（'.gameListing'）。每个（函数（）{
如果（下一个）{
游戏列表（本）；
返回false；
}
if（$（this）.hasClass（'active'））{
next=真；
}
});
});
函数调用\u ajax（url）{
//你的代码在这里
}
div{
显示：内联块；
边框：1px纯黑；
填充物：2px 5px；
利润率：0.5px；
光标：指针；
浮动：左；
}
活动分区{
背景：绿色；
}
#结果{
背景：红色；
显示：块；
浮动：左；
清除：左；
宽度：300px；
文本对齐：居中；
利润率：20px0；
}

&拉阔；
1.
2.
3.
4.
&拉阔；
使用自定义数据属性的简单解决方案

var $current = $('.gameListing.active');
$current.removeClass('active')

var postNumber = parseInt($current.attr('data-count'));

var nextPost = (postNumber - 1);

$("[data-count='"+nextPost+"']").trigger("click");

问题是什么？你的HTML结构是什么样的？为了防止重复，你可以使用1个以字符串为参数的函数。完美的解决方案，尽管需要是.gameListing.active，中间没有空格。很多感谢你的更新看起来很棒，但是上一个链接似乎也将活动类添加到下一个。为什么你有一个注释
call\u ajax
在您的答案中的函数？在本例中，实际的ajax不起作用，它只会抛出一个错误。因此，从答案中删除它。不。这是OP的代码。要使其工作，他需要取消注释它和调用它的代码行。删除它不会使文章更可读。它会。在移动设备上，它会e代码块不可滚动。如果它是一个精确的副本，我会这样做：
call_ajax（url）{/*您的代码在这里*/}