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

Posted 2023-05-09

技术标签:

【中文标题】如何在Javascript中从数组中查找上一个或下一个元素？【英文标题】：How to find previous or next element from array in Javascript? 【发布时间】：2019-06-12 09:16:18 【问题描述】：

我有一个表格，我得到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 也一样。

提前致谢。

【问题讨论】：

跟踪索引。要转到上一个或下一个，请分别使用 index-1 或 index+1。只需检查 index-1 是否为负 ( 【参考方案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);
)

根据您的需要进行更改。

【讨论】：

【参考方案2】：

你可以在这里试试这个代码：

说明：

项目索引正常并检查您在数组中的当前位置。

显示当前索引。

当 prev 按钮单击时检查它的第一项不是数组，当不是条件减量时显示当前项的值 -1。

当你点击下一个相同的条件和它的最后一项时在这里检查并更改当前索引和显示值增量2。

在next按钮中点击一次显示增量2，因为当前索引增量时显示增量2，主要原因是元素增加1，索引包含为0。所以一次增加2 .

如果您在itemIndex--; 之后显示，那么您将加一。

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>

谢谢

【讨论】：

你也可以在这里查看代码：github.com/sayed021/practricJavascript/blob/master/…【参考方案3】：

尝试使用 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>

【讨论】：

【参考方案4】：

您可以通过这种方式在全局变量中设置当前选定的 id 位置：例如