Как выбрать каждый <li>с каждым нажатием кнопки последовательно, используя Jquery или Javascript

Question

<ul>
  <li>New York</li>
  <li>Los Angeles</li>
  <li>Chicago</li>
</ul>

Я начинаю с установки функции щелчка, чтобы выбрать элементы списка.Единственная проблема заключается в том, что он выбирает каждый.Я мог бы использовать метод eq(), но это не позволило бы мне выбирать каждый следующий элемент списка при каждом нажатии кнопки.Я попробовал метод next(), и он выбирает следующий элемент, но мой вопрос: «Как выбрать первый элемент списка при нажатии кнопки, затем следующий элемент списка после следующего нажатия?и т. д.

$('button').click(function(){
  $('ul li').css("color", "red");
});

Answer 1

HTML:

 <ul>
      <li>sdf</li>
      <li>sddsdfs</li>
    </ul>

    <button>Click</button>

JS:

var count=1;
var length = $('ul').children().length;
$('button').on('click', function(){
    count =( count ==length) ? 0: count;
    if(count>1 && count <= length){
  $('ul li:nth-child('+(count - 1)+')').css("color", "");
    $('ul li:nth-child('+count+')').css("color", "red");
  }
  else{
        $('ul li:nth-child('+count+')').css("color", "red");
  }
  count++;
})

Вы можете сделать что-то подобное.

Answer 2

Добавление выбранного класса является самым простым, после чего вы можете перейти к next() или first() в зависимости от того, является ли текущий выбранный последний в группе или нет

$('button').click(function() {
  var $items = $('li'),
    $selected = $items.filter('.selected').removeClass('selected'),
    $next;
  // first time only when no selected exists, remove if you automatically select first one
  if (!$selected.length) {
    $next = $items.first();
  } else {
    $next = $selected.is($items.last()) ? $items.first() : $selected.next();
  }

  $next.addClass('selected')
});

.selected {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>New York</li>
  <li>Los Angeles</li>
  <li>Chicago</li>
</ul>
<button>Toggle selections</button>

Answer 3

Прямо в верхней части моей головы вы можете добавить class, на который вы можете ссылаться, нажимая кнопку.

$('button').click(function() {
    var selectedItem = null;
    if($('.is-selected').length) {
        if (!$('.is-selected').is('li:last')) {
          selectedItem = $('.is-selected').next();
        }
        $('.is-selected').removeClass('is-selected');
    }
    
    if (!selectedItem) {
       selectedItem = $('ul').children().first();
    }
    
    selectedItem.addClass('is-selected');
});

.is-selected {
background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>New York</li>
  <li>Los Angeles</li>
  <li>Chicago</li>
</ul>

<button type='button'>Click Me!</button>

Answer 4

Вы должны вести счет.Таким образом, у вас будет отдельная переменная, которая проверяет, что это первый клик.Если это первый клик, мы выбираем .eq(0) или .first().Если нет, то всегда выбирайте .next().

Давайте рассмотрим, как это будет работать на практике, на вашем примере.HTML останется прежним, а JS изменится:

var alreadyClicked = false;
var selectedElement;

$('ul li').on('click', function() {
  if (alreadyClicked) {
    selectedElement = selectedElement.next();
  } else {
    alreadyClicked = true;
    selectedElement = $('ul li').first();
  }
  
  selectedElement.css('color', 'red');
  
});

<ul>
  <li>New York</li>
  <li>Los Angeles</li>
  <li>Chicago</li>
</ul>

  <script src="https://code.jquery.com/jquery-git.js"></script>
  

Как видите, мы ведем подсчет внутри логического значения alreadyClicked.Если значение равно false, мы выберем первый элемент, в противном случае мы всегда переместимся на единицу.

Кроме того, мы можем улучшить код, удалив полностью alreadyClicked и просто проверив, является ли selectedElementуже заполнено.