如何使用jQuery查找最近的元素

Question

我有以下的HTML代码：

<td>
  <input type="text" size="40" value="" name="related_image" id="related_image">  
  <input type="button" class="button addImage" value="Get image url">
</td>
<td>
  <input type="text" size="40" value="" name="alternative_image" id="alternative_image">  
  <input type="button" class="button addImage" value="Get image url">
</td>

我需要确定我点击的是哪个按钮，然后向最近的输入文本字段添加一些文本。
例如，如果我点击第一个<td>中的按钮，则需要在related_image文本字段中输入一些文本。

我尝试了以下的jQuery代码，但它没有起作用：

jQuery('.addImage').click(function() {
  var tmp = jQuery(this).closest("input[type=text]").attr('name');
  alert(tmp);
});

（我只是为了测试而检索输入名称。）

我想我可能需要使用find和/或siblings。但我不太确定如何做。

感谢任何帮助。

编辑

我刚刚成功地使用了这段代码：
addImageEvent = jQuery(this).prevAll("input[type=text]:first")

使用prevAll是否是一个糟糕的选择？

- Steven

Answer 1

尝试：

var tmp = $(this).siblings(":text").attr("name");

你正在使用的closest()方法可以找到最近的祖先元素，这不是你在这里所需要的。

- cletus

---

啊啊啊 - 我以为siblings是指孩子们，但实际上siblings是指兄弟姐妹。谢谢。我看到这个“问题”有多种解决方案。 - Steven

如果存在许多兄弟节点，那么如何找到最近的一个？ - Sudarshan Tanwar

它的运行非常好，谢谢 :) 我在使用“next”和“closest”之前尝试了siblings! :D - rvandoni

Answer 2

.closest()方法用于查找父元素，而在这种情况下你需要使用.siblings()方法，如下所示：

jQuery('.addImage').click(function() {
  var tmp = jQuery(this).siblings("input[type=text]").attr('name');
  alert(tmp);
});

如果格式始终如您的示例所示一致，只需使用.prev()即可，像这样：

jQuery('.addImage').click(function() {
  var tmp = jQuery(this).prev().attr('name');
  alert(tmp);
});

- Nick Craver

---

是的。正如我在上面评论中所说，我混淆了父/子关系，认为兄弟姐妹等同于子项。感谢您提供的解决方案 :) - Steven

Answer 3

这里有一个“最接近”的实现，旨在针对后代而不是父级元素：

$.fn.nearest = function(selector) {
    var nearest, node = this, distance = 10000;
    node.find(selector).each(function(){
        var n = $(this),
            d = n.parentsUntil(node).size();
        if (d < distance) {
            distance = d;
            nearest = n;
        } else if (d == distance) {
            nearest.add(this);
        }
    });
    return nearest;
};

- Nathan Bubna