Как кликнуть на следующий или предыдущий input?

Question

[Антон]

Есть примерно такое:

<div class="gallery-colors">
<label class="photocheck green" for="65105"><input class="gl" id="65105" name="bmw" type="radio"></label>
<label class="photocheck red" for="65106"><input class="gl" id="65106" name="bmw" type="radio"></label>
<label class="photocheck green" for="65109"><input class="gl" id="65109" name="bmw" type="radio"></label>
<label class="photocheck" for="65107"><input class="gl" id="65107" name="bmw" type="radio"></label>
<label class="photocheck" for="65123"><input class="gl" id="65123" name="bmw" type="radio"></label>
<label class="photocheck" for="65144"><input class="gl" id="65144" name="bmw" type="radio"></label>
<label class="photocheck" for="65134"><input disabled class="gl" id="65134" name="bmw" type="radio"></label>
<label class="photocheck" for="65147"><input class="gl" id="65147" name="bmw" type="radio"></label>
</div>

Когда мне надо нажать на первый незаблокированный INPUT я в обработчике события использую это:

$('.gallery-colors').find('[type="radio"]:not(:disabled):first').click();

Я хочу расширить возможности галереи, у меня ещё есть два события, но не знаю как сделать следующее:

Кликнуть на предыдущий инпут (т.е. понять какой в данный момент выбран и кликнуть предыдущий),
то же самое для следующего. Это для свайпа.
Сам свайп:

if (direction == 'left') {
                //сработает при движении влево
            }
            if (direction == 'right') {
                //сработает при движении вправо
            }

Answer 1

[0xD34F]

Предыдущий:

$('.gallery-colors :checked')
  .parent()
  .prevAll()
  .find(':radio:not(:disabled)')
  .last()
  .click();

Следующий:

const curr = document.querySelector('.gallery-colors :checked');
if (curr) {
  for (let n = curr.parentNode; n = n.nextElementSibling;) {
    const next = n.querySelector('input[type="radio"]:enabled');
    if (next) {
      next.click();
      break;
    }
  }
}

Comments

[Антон]

Работает. Но не в моем случае.
Я правильно понял, если каждый Label обернуть в div, то уже не будет работать?

<div class="photocheckchild red">
<label class="photocheck" for="65147"><input class="gl" id="65147" name="bmw" type="radio"></label>
</div>

Я пробовал так, но это не дало результат:

$('.gallery-colors div :checked')
  .parent()
  .prevAll()
  .find('input[type="radio"]:not(:disabled)')
  .last()
  .click()

[0xD34F]

Ну и на хрена было врать про разметку? Может, вам на самом деле помощь не нужна?

[Антон]

0xD34F, прошу прощения, не учел этот момент с вложениями, подумал, что это не влияет

[0xD34F]

Вместо родительского элемента радиокнопки поднимайтесь к div'у - .closest('.photocheckchild').

[Антон]

0xD34F, о, спасибо большое)