Как пройти по массиву с jQuery один за другим с помощью кнопки

Question

У меня есть массив объектов, которые мне нужно перебирать по каждому объекту с помощью кнопки. У меня есть настройка, и она проходит, но пропускает 2 раза при каждом щелчке вместо перехода к следующей записи. Ниже то, что у меня есть. Кто-нибудь может мне помочь? Или есть лучший способ перебирать массив один за другим?

$(document).ready(function() {
  var i = 0;

  var values = [{
      "currentJob": "Job1",
      "StreetAddress": "xxx",
      "Place": "yyy"
    },
    {
      "currentJob": "Job2",
      "StreetAddress": "xxx2",
      "Place": "yyy2"
    },
    {
      "currentJob": "Job3",
      "StreetAddress": "xxx3",
      "Place": "yyy3"
    },
    {
      "currentJob": "Job4",
      "StreetAddress": "xxx34",
      "Place": "yyy4"
    },
    {
      "currentJob": "Job5",
      "StreetAddress": "xxx5",
      "Place": "yyy5"
    }
  ]

  i = (i) % values.length;

  //Here is where I iterate through using a button
  $(".btn-arrow-up").click(function() {
    i = i + 1;
    $(".current-job-box").html(values[i].currentJob);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type='button' class='btn-arrow-up'>up</button>
<hr/>
<div class='current-job-box'><em>result</em></div>

Answer 1

Вместо

i = i +1;
$(".current-job-box").html(values[i].currentJob);

Попробуйте

$(".current-job-box").html(values[i].currentJob);    
i = i +1;

Этот результат вызван тем, что вы сначала увеличиваете i, который для начала равен 0, а после приращения - 1, поэтому следующая строка принимает второй элемент вместо первый элемент массива.

Я также удалил эту строку:

  i = (i) % values.length;

Потому что я думаю, что это не обязательно

PS: Привет и добро пожаловать в StackOverflow: D

Answer 2

$(document).ready(function() { 
var i = 0;
var flag = true;

var values = [{
    "currentJob":"Job1",
    "StreetAddress": "xxx",
    "Place":"yyy"
},
{
    "currentJob":"Job2",
    "StreetAddress": "xxx2",
    "Place":"yyy2"
},
{
    "currentJob":"Job3",
    "StreetAddress": "xxx3",
    "Place":"yyy3"
},
{
    "currentJob":"Job4",
    "StreetAddress": "xxx34",
    "Place":"yyy4"
},
{
    "currentJob":"Job5",
    "StreetAddress": "xxx5",
    "Place":"yyy5"
}
]

i = (i) % values.length;

//Here is where I iterate through using a button
$(".btn-arrow-up").click(function() { 
if(flag)
{
$(".current-job-box").html(values[i].currentJob);
flag = false;
}
else
{
i = i +1;
$(".current-job-box").html(values[i].currentJob);
}
console.log(values[i].currentJob);

});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span class="btn-arrow-up">ddddddd</span>
</div>