Используйте jQuery, чтобы выбрать определенный тип элемента в том же Div, что и другой элемент.

Question

Я новичок в jQuery и у меня есть вопрос, который я считаю основным. Я искал в Google и на сайте jQuery информацию о «родителях» и «детях», но у меня возникли проблемы с формулировкой того, чего я хочу достичь.

Допустим, у меня есть следующая разметка:

<div>
    <input type="text" value="John Doe" /> 
    <a href="#" class="clearButton">clear</a>
</div>
<div>
    <input type="text" value="Jane Doe" /> 
    <a href="#" class="clearButton">clear</a>
</div>
<div>
    <input type="text" value="Joe Smith" /> 
    <a href="#" class="clearButton">clear</a>
</div>

По сути, я хочу написать немного jQuery, чтобы каждая ссылка «clearButton» очищала значение своего одноуровневого ввода при клике. Возможно ли это, учитывая мою разметку? Или мне нужен уникальный идентификатор для каждого входа или каждого div? Можно ли получить щелчок, а затем использовать команду "this", чтобы выбрать правильный входной элемент? Я собрал немного своего собственного кода, используя одноуровневый элемент, но он очистил все входные данные одновременно.

Любые советы или ссылки на соответствующую информацию с благодарностью! Спасибо!

Answer 1

Если ссылка всегда рядом с полем ввода:

$('.clearButton').click(function() {
    $(this)          // the clearButton
          .prev()    // get the input field
          .val('');  // clear its value

    return false;    // disable default link action (otherwise # adds to url)
});

Answer 2

Parent и Find , demo

$(document).ready(function () {
    $('.clearButton').click(function () {
       $(this).parent().find('input').val('');   
    }) 
});

Answer 3

Возможно, вам просто нужно прикрепить .first() к вашему коду.это должно выглядеть примерно так:

$('.clearButton').click(function() {
    $(this).siblings().first().val('');
});

Answer 4

$('.clearButton').click(function () {
   $(this).sibling('input').val('');   
});