使用 jQuery 从单击的元素中获取最接近的输入值

Posted 2023-05-08

【中文标题】使用 jQuery 从单击的元素中获取最接近的输入值

【英文标题】：Getting closest input value from clicked element with jQuery

【发布时间】：2021-03-27 08:30:47

【问题描述】：

我有以下标记：

<div class="options">
  <div class="quantity">
     <label>Qty:</label>
     <input type="text" name="quantity" value="1"/>
  </div>
  <div class="buttons">
    <a href="#" class="add">Add Item</a>
  </div>
</div>

我有一个使用 jQuery 绑定到“添加”类的单击事件。当我点击它时，我想获取 name="quantity" 的值，但是有几个地方点击了“添加”，还有几个数量字段。

我正在尝试获取“最接近”的输入值。我试过使用 'closest' 和 'findall' ，但没有运气。

知道如何使用 jQuery 来实现吗？谢谢！

【问题讨论】：

我从未听说过 jQuery 方法 findall。我建议你通过traversal methods 看看它们。 closest 已经是一个好的开始。请发布您到目前为止的代码。

【参考方案1】：

$(".add").on("click", function () 
    var val = $(this).closest("div.options").find("input[name='quantity']").val();
);

这里的策略是：

使用closest 查找与给定选择器匹配的最近祖先（在本例中为div，类option） 然后使用find 使用attribute equals selector 找到input 和给定的name。 最后，使用val检索input的值。

【参考方案2】：

您需要使用closest 找到合适的封闭元素，然后从那里开始工作。

$(link).closest(".options").find("input[name=quantity]")

【参考方案3】：

$(this).parent().parent().find("input[name=quantity]").val()

这应该可以解决问题

【讨论】：

好点我的坏我仍然建议使用最接近但以任何方式编辑我的答案以确保正确性

【参考方案4】：

我猜最接近的作品只适用于相同级别的元素。所以..

为什么不把 id 放到输入栏，然后通过$('#input-id') 选择呢？

或者遍历类选项并在其中找到输入：$(this).parents('.options:first').find('input');

【讨论】：

closest 在 DOM 中找到与选择器匹配的最近的祖先。 parents 查找与选择器匹配的所有祖先。

刚刚修好了，addad :first。所以最近的作品向上搜索dom？再次变得更聪明.. :)