找到最接近的类onclick

Question

I have the following 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>

When you click on "pickuplocation" I need to get the value of "postcodeinput".

The issue is that there are multiple postcode loop ups on the page so I can't just use $('.postcodeinput').val() as there are two and both are handled in the same function.

What I want to do is find the closest element .postcodeinput and get the value. I have tried the following jQuery:

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

I have tried this, however, I am just getting 'undefined'

Answer 1

You need to traverse to postcodeinput is child of the sibling element of picklocation 's parent element.

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

Answer 2

i made another solution. now ,after i made the snippet, i realized that it looks like the one Satpal gave ( you can use that one ) . you should use my solution in case your HTML changes and you want to be more specific about where to look for the value.

first look for the parent ( that is a div ) of the button, then search the previous element ( div ) that has a child .postcodeinput .

second in that div search for the .postcodeinput and get it's value

third only if that value in not null...do something with it ( in this case write in console )

 $('.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>