Как получить текст через несколько элементов?

Question

[vladislav198712]

Всем привет! Есть вот такой скрипт для умножения количества товара на стоимость

const qty = document.querySelectorAll('.quantity');
        for(let i=0;i<qty.length;i++){
            let amount = qty[i].nextElementSibling;
            let price = +parseInt(amount.textContent);
            qty[i].addEventListener('input', () => amount.textContent = qty[i].value*price+'₴');
        }

Он отлично работает если после input сразу идёт строка с ценой, в моем случае это span. Но стоит добавить что-то между input и span, скрипт перестает работать. В примере ниже скрипт работает только на первом и втором элементе.

<div class="">
    <h5>Первый элемент</h5>
    <input class="quantity" type="number" min="1" max="99" value="1" title="Количество" inputmode="numeric">
    <span class="price-amount">888<span>₴</span></span>
  </div>
  <div class="">
    <h5>Второй элемент</h5>
    <input class="quantity" type="number" min="1" max="99" value="1" title="Количество" inputmode="numeric">
    <span class="price-amount">888<span>₴</span></span>
  </div>
  <div class="">
    <h5>Третий элемент</h5>
    <input class="quantity" type="number" min="1" max="99" value="1" title="Количество" inputmode="numeric">
    <p>Описание товара</p>
    <span class="price-amount">888<span>₴</span></span>
  </div>

Это происходит из-за nextElementSibling в js. Как правильно указать что нужен не следующий элемент, а например через одну строку, либо через две?

Answer 1

[Вадим]

Да вариантов много. например:

qty[i].parentElement.querySelector('.price-amount')

Возьмёт родителя для qty[i] и найдёт в нём первый элемент с классом .price-amount.
В таком случае порядок вообще не важен, хоть перед инпутом, хоть вложите span в другой див. Главное чтобы родитель для qty[i] был родителем любого порядка и для price-amount

Comments

[vladislav198712]

А если например цена и количество в разных div с разными классами? Пример

<div class="one">
  <div class="two">
    <h5>Третий элемент</h5>
    <input class="quantity" type="number" min="1" max="99" value="1" title="Количество" inputmode="numeric">
  </div>
  <div class="three">
    <p>какой-то текст</p>
    <span class="price-amount">888<span>₴</span></span>
  </div>
  </div>

[Вадим]

vladislav198712, так уже не сработает, так как родитель для инпут не родитель для price-amount.
В таком случае нужно переписать на что-то вроде:

qty[i].closest('.one').querySelector('.three .price-amount')

Найдёт ближайший родительский элемент с классом one а потом в нём элемент с классом three внутри которого элемент с классом price-amount

[vladislav198712]

Вадим,

const qty = document.querySelectorAll('.quantity');
        for(let i=0;i<qty.length;i++){
            let amount = qty[i].closest('one').querySelector('.three .price-amount')
            let price = +parseInt(amount.textContent);
            qty[i].addEventListener('input', () => amount.textContent = qty[i].value*price+'₴');
        }

Не срабатывает почему-то

[Вадим]

vladislav198712, точку перед one

[vladislav198712]

Вадим, Пробовал, не сработало

[Вадим]

vladislav198712,

const qty = document.querySelectorAll('.quantity');
        for(let i=0;i<qty.length;i++){
            let amount = qty[i].closest('.one').querySelector('.three .price-amount')
            let price = +parseInt(amount.textContent);
            qty[i].addEventListener('input', () => amount.textContent = qty[i].value*price+'₴');
        }

Работает, проверил

[Вадим]

vladislav198712, Работает для этой разметки:

<div class="one">
  <div class="two">
    <h5>Третий элемент</h5>
    <input class="quantity" type="number" min="1" max="99" value="1" title="Количество" inputmode="numeric">
  </div>
  <div class="three">
    <p>какой-то текст</p>
    <span class="price-amount">888<span>₴</span></span>
  </div>
  </div>

[vladislav198712]

Вадим, Спасибо огромное! Как я могу тебя отблагодарить за предоставленную помощь?

[Вадим]

vladislav198712, мы тут на альтруизме, если вопрос нормальный, как у Вас, а не задание из серии "сделайте за меня у меня лапки" ;-)

Answer 2

[Rsa97]

-let amount = qty[i].nextElementSibling;
+let amount = qty[i].parentElement.querySelector('.price-amount);