根据箭头单击更改data-id位置

Question

我的问题如下：

我有两个箭头图像，第一个是前箭头，另一个是前箭头。

单击箭头时，从我还没有的ul li元素的data-id位置开始，我想向前移动到以下数据id，反之亦然。

这是ul li

<img id="arrow_next" src="http://www.nameofmywebsite.com/example.png" height="50" width="50" />  

<ul id="lower">
    <li data-id="1">Primo</li>
    <li data-id="2">Secondo</li>
    <li data-id="3">Terzo</li>
</ul>   

这是一个功能，例如，关注向前箭头。在这里，我想做一个循环（也许是for循环？），其中我会说像＆＃34; index ++＆＃34; （并且，在相反的情况下，＆＃34;索引 - ＆＃34;）

$('#arrow_next').click(function() {
    var index = $("#lower li").data('id') - 1;

    var url = "example.php";

    $.getJSON(url,
        function(json) {
            output = "<div>";
            output += "<p>" + json.general.obj[index].description_it + "</p>";
            output += "</div>";         
            $("#response").html(output);    
        });         
});