查找最接近类的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的父元素的兄弟元素的子。

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

Answer 2

我提出了另一种解决方案。现在，在我做了片段之后，我意识到它看起来像一个Satpal给的（你可以使用那个）。您应该使用我的解决方案来防止HTML更改，并且希望更具体地了解在何处查找值。

第一个查找按钮的父级（即div），然后搜索具有子级.postcodeinput的上一个元素（div）。

第二次在该分区搜索的.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>