jQuery.closest未能找到父级's的输入值

jQuery .closest failed to find parent's input value

本文关键字：输入 closest jQuery      更新时间：2024-06-10

我有这样的HTML结构：

<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2">
<span class="input-group-btn">
  <button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10">
      <span class="glyphicon glyphicon-plus"></span>
  </button>
</span>

我还有这个jquery脚本：

<script>
    $(document).ready(function(){
        $(document).on("click", ".btn-plus", function() {
            event.preventDefault();
            var quantity = $( this ).closest( ".quantity" ).val();
            alert (quantity);
        });
    });
</script>

理论上，一旦点击btn-plus，我就可以得到输入文本的值，但结果仍然得到undefined的值。

如何使用.closest获取.quantity的输入值？感谢

.closest（）用于查找匹配的祖先元素，在您的情况下，input元素是button的父的前一个同级元素

$(document).ready(function() {
  $(document).on("click", ".btn-plus", function(event) {
    event.preventDefault();
    var quantity = $(this).parent().prev(".quantity").val();
    alert(quantity);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2">
<span class="input-group-btn">
  <button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10">
      <span class="glyphicon glyphicon-plus"></span>
</button>
</span>

$(document).ready(function() {
  $(document).on("click", ".btn-plus", function(event) {
    event.preventDefault();
    var quantity = $(this).closest("span").prev().val();//use closest span and prev to get input
    alert(quantity);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2">
<span class="input-group-btn">
  <button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10">
      <span class="glyphicon glyphicon-plus">asdasdasdas</span>
</button>
</span>

使用.closest()跨度获取父跨度。由于输入在span使用.prev()

之前

根据JQuery网站，最接近的函数的作用与父函数类似，因为它只查看目标元素的祖先。

https://api.jquery.com/closest/#entry-longdesc

由于输入标签不是按钮标签的父标签，那么最接近的功能将找不到它

使用父标记和同级标记或类似标记的组合来定位输入标记。

相关文章：