如何从Javascript数组中查找上一个或下一个元素?

时间:2019-01-18 05:48:28

标签: javascript jquery arrays sorting

  

我有一种形式要获取id。我要从数据库中获取一组ids。我必须先检查current_id是否在数组中。为此,我正在编写对我有用的代码。

var arr = [{'id':4},{'id':5},{'id':7},{'id':8},{'id':9}];

   var  current_id = 5;
    for(var i=0; i<arr.length; i++) 
        {
            if (arr[i] == current_id) 
            return true;
        }

现在假设我想转到current_id的上一个ID或我想转到current_id的下一个ID,如何在javascript中获取此类数据。

例如:

我在current_id = 5上,用户将单击previous_button,然后它应转到{'id':4}。并且如果用户单击next_button,则应该转到{'id':7}

如果用户已经使用current_id = 4,并且他单击previous_button,则应该返回false。同样适用于next_button。

提前谢谢。

4 个答案:

答案 0 :(得分:1)

您可以通过多种方法执行此操作。

var arr = [{'id':4},{'id':5},{'id':7},{'id':8},{'id':9}], arrids=arr.map(e=>e.id);
var current_id = 5, prev_btn = $("#prev"), next_btn = $("#nex");
prev_btn.click(e=>{ 
  current_id--;
  var prevObj = arr[arrids.indexOf(current_id)] ? arr[arrids.indexOf(current_id)] : null;
  console.log(prevObj);
});
next_btn.click(e=>{
  current_id++;
  var nextObj = arr[arrids.indexOf(current_id)] ? arr[arrids.indexOf(current_id)] : null;
  console.log(nextObj);
})

根据您的需要进行更改。

答案 1 :(得分:0)

您可以通过以下方式在全局变量中设置当前选定的ID位置: 例如

let currentPos = 1;

然后单击prevButton即可导航

  

arr [currentPos-1]并更改currentPos = currentPos -1;

和nextButton相同的方式

  

arr [currentPos + 1]并更改currentPos = currentPos +1;

答案 2 :(得分:0)

尝试使用Jquery $.each循环关注

var current_id = '';
function Redirect(type)
{
if(current_id=='')
{
current_id=5;
}
var arr = [{'id':4},{'id':5},{'id':7},{'id':8},{'id':9}];    
   $.each(arr,function(i,ID){
   if(ID.id==current_id)
   {
   if(type=='Pre')
   {
   		if(i!=0)
   		{
   			current_id=arr[i-1].id;
            alert('Previous ID is : '+current_id);
            return false;//This Return false is for break "$.each" loop
   		}
   } 
   else if(type=='Next')
   {
   if(i!=arr.length-1)
   		{
   			current_id=arr[i+1].id;
            alert('Next ID is : '+current_id);
            return false;//This Return false is for break "$.each" loop
   		}
   }
   }
   });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="Redirect('Pre')">Previous</button>
<button onclick="Redirect('Next')">Next</button>

答案 3 :(得分:0)

您可以在此处尝试以下代码:

说明:

  1. item索引正常,并检查您在数组中的当前位置。

  2. 显示当前索引。

  3. 单击上一个按钮时,如果没有条件减一,则检查它的第一项不是数组,并显示当前项-1的值。

  4. 当您单击相同条件的下一个条件并且它是否位于最后一项时,请在此处选中并更改当前索引并显示值增量2。

在下一个按钮中单击一次将显示增量2,因为当当前索引递增时它显示增量2,主要原因是元素增加1,索引包含为0。因此它一次增加2。

如果您在itemIndex--;之后显示,则增加1。

var arr = [{'id':4},{'id':5},{'id':7},{'id':8},{'id':9}];
var  current_id = 5;
//find the your current id is exist in the array
var itemIndex = arr.map(function(o) { return o.id; }).indexOf(current_id);
//display the value of index
document.getElementById('display').innerHTML = itemIndex+1;
document.getElementById('prev').addEventListener('click', function(e) {
  if(itemIndex!=-1 && itemIndex != 0){
    document.getElementById('display').innerHTML = itemIndex;
    itemIndex--;
  }
});
document.getElementById('next').addEventListener('click', function(e) {
  if(itemIndex!==-1 && arr.length-1 > itemIndex){
    document.getElementById('display').innerHTML = itemIndex+2;
    itemIndex++;
    /*document.getElementById('display').innerHTML = itemIndex+1;*/
 }
});
<div id="display"></div>
	<button id="prev">prev</button>
	<button id="next">next</button>

谢谢