Блог

Главная - Вопросы по программированию - Как получить имя ввода на кнопке того же , нажатой с помощью jquery?

Как получить имя ввода на кнопке того же , нажатой с помощью jquery?

#javascript #html #jquery

Вопрос:

У меня их несколько input в одном и том же <table> . Затем я хочу, чтобы name на той же строке x была нажата кнопка. Но каждый раз он возвращается неопределенным. Я знал, что, должно быть, что-то не так в указании на имя ввода. Вот мой код:

 $('.delno').on('click',function(){
    var pname=$(this).parent('tr').find('.price').attr('name');
    console.log(pname);
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-striped">
  <tr>
    <td class="align-middle text-center">1</td>
    <td class="w-10 p_2hi"><input type="number" class="form-control price" onfocus="this.select();" onmouseup="return false;" name="f4eaca5b2376160b9b6c8d542a89ba88" value="1" /></td>
    <td class="align-middle text-center"><button type="button" class="btn btn-outline-danger delno">x</button></td>
  </tr>
  <tr>
    <td class="align-middle text-center">2</td>
    <td class="w-10 p_2hi"><input type="number" class="form-control price" onfocus="this.select();" onmouseup="return false;" name="fa0410ac57ba1a277da3e37c6cc30606" value="1" /></td>
    <td class="align-middle text-center"><button type="button" class="btn btn-outline-danger delno">x</button></td>
  </tr>
  <tr>
    <td class="align-middle text-center">3</td>
    <td class="w-10 p_2hi"><input type="number" class="form-control price" onfocus="this.select();" onmouseup="return false;" name="853ce96cd36d3d6b6cb5aa179ea930bb" value="1" /></td>
    <td class="align-middle text-center"><button type="button" class="btn btn-outline-danger delno">x</button></td>
  </tr>
</table>

В данном случае я это понимаю. Я должен найти входной класс .price . Затем получите его name атрибут. Внутри верхнего уровня <tr> . Но это кажется неправильным.

Ответ №1:

Вопрос

.parent() перемещается только на один уровень вверх по дереву DOM

https://api.jquery.com/parent/

Решение

Использовать .parents() или .closest()

https://api.jquery.com/parents/

https://api.jquery.com/closest/

 $('.delno').on('click', function() {
  var pname = $(this).closest('tr').find('.price').attr('name');
  console.log(pname);
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-striped">
  <tr>
    <td class="align-middle text-center">1</td>
    <td class="w-10 p_2hi"><input type="number" class="form-control price" onfocus="this.select();" onmouseup="return false;" name="f4eaca5b2376160b9b6c8d542a89ba88" value="1" /></td>
    <td class="align-middle text-center"><button type="button" class="btn btn-outline-danger delno">x</button></td>
  </tr>
  <tr>
    <td class="align-middle text-center">2</td>
    <td class="w-10 p_2hi"><input type="number" class="form-control price" onfocus="this.select();" onmouseup="return false;" name="fa0410ac57ba1a277da3e37c6cc30606" value="1" /></td>
    <td class="align-middle text-center"><button type="button" class="btn btn-outline-danger delno">x</button></td>
  </tr>
  <tr>
    <td class="align-middle text-center">3</td>
    <td class="w-10 p_2hi"><input type="number" class="form-control price" onfocus="this.select();" onmouseup="return false;" name="853ce96cd36d3d6b6cb5aa179ea930bb" value="1" /></td>
    <td class="align-middle text-center"><button type="button" class="btn btn-outline-danger delno">x</button></td>
  </tr>
</table>
Метки: ,