Найти ближайший класс OnClick

Question

У меня есть следующий HTML:

<div class="col-md-10"> 
    <input type="text" name="postcode" class="postcodeinput" /> 
</div> 

<div class="col-md-2"> 
    <a class="picklocation"><i class="fa fa-search" aria-hidden="true"></i> 
    </a> 
</div> 

При нажатии на кнопку «PickUpLocation» Мне нужно, чтобы получить значение «postcodeinput».

Проблема заключается в том, что на странице есть несколько строк для обработки почтовых индексов, поэтому я не могу просто использовать $('.postcodeinput').val(), так как их две, и обе они обрабатываются в одной и той же функции.

Что я хочу сделать, это найти ближайший элемент .postcodeinput и получить значение. Я попытался следующие JQuery:

$('.picklocation').click(function() { 
    var postcode = null; 
    console.log($(this).prev('.postcodeinput').val()); 
}); 

Я попробовал это, однако, я просто получать «неопределенный»

Answer 1

Вы должны пройти к postcodeinput является дочерним родственным элементом picklocation «s родительского элемента ,

$('.picklocation').click(function() { 
    console.log($(this).parent().prev().find('.postcodeinput').val()); 
}); 

Answer 2

Я сделал другое решение. теперь, после того, как я сделал фрагмент, я понял, что это похоже на то, что дал Сатпал (вы можете использовать его). вы должны использовать мое решение в случае изменения вашего HTML-кода, и вы хотите уточнить, где искать значение.

first Ищите родителя (то есть div) кнопки, затем выполните поиск предыдущего элемента (div), у которого есть ребенок .postcodeinput.

второй в этой категории сНу для .postcodeinput и получить его значение

третьего только если это значение не равно нулю ... сделать что-то с ним (в данном случае записи в консоли)

$('.picklocation').click(function() { 
 
    var postcode = $(this).parent("div").prev("div").has(".postcodeinput") 
 
    var postcodeVal = $(postcode).find('.postcodeinput').val(); 
 
    if(postcodeVal != 0) { 
 
    console.log(postcodeVal); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-10"> 
 
    <input type="text" name="postcode" class="postcodeinput" /> 
 
</div> 
 

 
<div class="col-md-2"> 
 
    <a class="picklocation"><i class="fa fa-search" aria-hidden="true">First Button</i> 
 
    </a> 
 
</div> 
 
<div class="col-md-10"> 
 
    <input type="text" name="postcode" class="postcodeinput" /> 
 
</div> 
 

 
<div class="col-md-2"> 
 
    <a class="picklocation"><i class="fa fa-search" aria-hidden="true">Second Button</i> 
 
    </a> 
 
</div>