Блог

Главная - Вопросы по программированию - Получить значение ввода в родительском parent parent

Получить значение ввода в родительском parent parent

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть страница с таблицей из нескольких строк (HTML сгенерирован, я не могу его изменить). В каждой строке есть 2 ввода (разные столбцы). Когда я изменяю значение одного из входных данных (с именем класса «qty»), я хочу получить значение второго ввода, но я не могу этого сделать. Обратите внимание, что количество строк не является фиксированным

Мой сгенерированный HTML и попытка

 jQuery('.qty').on('change', function() {
  console.log(jQuery(this).val());
  console.log($(this).closest("tr").children('.product_quantity').children('input').val());
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
      <th class="product-quantity">Quantity 1</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="product-name">Name product 1</td>
      <td>$1,00</td>
      <td class="product-quantity">
        <input type="number" min="1" step="1" name="items[45955][quantity]" value="4">
      </td>
      <td>
        <div>
          <input type="number" class="qty" step="1" min="0" max="" name="quantity" value="1" title="Qté" size="4" placeholder="" inputmode="" kl_vkbd_parsed="true">
        </div>
      </td>
    </tr>
    <tr>
      <td class="product-name">Name product 1</td>
      <td>$1,00</td>
      <td class="product-quantity">
        <input type="number" min="1" step="1" name="items[45955][quantity]" value="4">
      </td>
      <td>
        <div>
          <input type="number" class="qty" step="1" min="0" max="" name="quantity" value="1" title="Qté" size="4" placeholder="" inputmode="" kl_vkbd_parsed="true">
        </div>
      </td>
    </tr>
  </tbody>
</table>

Я пытался изменить ближайший родительский и многие другие тесты, но я не могу этого сделать
Не могли бы вы мне помочь, пожалуйста?

Комментарии:

1. closest('tr').find('input').eq(1) чтобы получить второй

2. Может быть, не помешало бы поставить id="product-xxxx" на <tr> ? таким образом, вы также можете отправить пользователя к этому продукту, возможно, создать некоторый :target стиль и немного упростить ближайшую цель, выполнив: closest('[id^=”product-”]').find(...)

3. Обратите внимание, что 2-й ввод никоим образом не является «родительским» для первого ввода (на основе заголовка parent-parent-родитель)

4.Обратите внимание, что $(".product_quantity") не будет найдено <td class="product-quantity"> "_" !== "-" — исправьте опечатку (измените на class='product_quantity' в обеих строках), и ваш код будет работать нормально.

Ответ №1:

Я предполагаю, что вы хотите получить значение действия при изменении значения количества

Попробуйте это

 $('.product-quantity input').on('keyup', function () {
    console.log($(this).val());
    console.log($(this).parent('td').next('td').find('div input').val());
})

Ответ №2:

Попробуйте это:

 $(this).parent().parent().parent().find(".product-quantity input").val();