javascript - .closest() 函数不适用于输入

Question

我有这样的 HTML

<input type="text" class="q" placeholder="search nearby">
<input type="hidden" name="lat" class="lat" value="123">
<input type="hidden" name="lon" class="lon" value="456">
<input type="submit" value="Go" class="btn btn-xs btn-primary btn-go">

我想通过单击 btn-go 获取 lat/lon/q 类的值。我知道我们可以使用最接近的方法来做到这一点，但我无法以某种方式实现这一目标。

我的JS

$(document).on('click', '.btn-go', function(){
        var lat_value = $(this).closest('input').find('.lat').val();
        var lon_value = $(this).closest('input').find('.lon').val();
        var q_value = $(this).closest('input').find('.q').val();

        alert(lat_value + lon_value + q_value);
    });

Answer 1

使用 sibling

$(document).on('click', '.btn-go', function() {
  var lat_value = $(this).siblings('.lat').val();
  var lon_value = $(this).siblings('.lon').val();
  var q_value = $(this).siblings('.q').val();

  alert(lat_value + lon_value + q_value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="q" placeholder="search nearby">
<input type="hidden" name="lat" class="lat" value="123">
<input type="hidden" name="lon" class="lon" value="456">
<input type="button" value="Go" class="btn btn-go btn-xs btn-primary b">