Question

我有一些具有类似内容的div和链接，图像等请求扩展的jQuery函数。

div具有唯一的ID，但其内容具有相似的字段和结构。

例如，HTML是：

 <div id="bar1">
   <some xhtml><input type="textbox" class="searchTxt" />
   <some xhtml><img class="notify" src="blank.gif" />
 </div>
 <div id="bar2">
   <some xhtml><input type="textbox" class="searchTxt" />
   <some xhtml><img class="notify" src="blank.gif" />

 ...

和jQuery：

$('.searchTxt').click(function(obj) {
    //now here I want to know which searchTxt that was clicked,
    //so I can change the img-source..
    //without parent().parent() that may fail since div-content may vary.
});

编辑：
这部分是一个糟糕的例子，因为jQuery不会修改任何内容，而且这总是可用的。
想象一下两个div中的图像应该被点击功能隐藏示例已更新。

这里有什么正确的道路？

Answer 1

您可以将closest()与选择器一起使用：

$('.searchTxt').click(function(obj) {
    alert($(this).closest("div[id^='bar']").prop("id"));
});

演示：http://jsfiddle.net/AndyE/bR3xv/1/

或者，您可以将事件处理程序添加到<div>元素，并允许事件传播到它。 event.target会引用文本元素，而this会引用div：

$('div[id^="bar"]').click(function (evt) {
    if (evt.target.className == "searchTxt")
        alert(this.id);
});

演示：http://jsfiddle.net/AndyE/bR3xv/

Answer 2

使用$(this)表示文本框，$(this).parents("div")查找父div。

示例：

$(".searchTxt").click(function() {
    alert($(this).parents("div").attr("id"));
});

Answer 3

您可以使用closest函数转到封闭的<div>元素。

$(this).closest('div')

当输入包含在您要查找的实际div中的另一个div中时，这会出现问题。为了防止这种情况，您可以添加一个类以确保您找到正确的类。

$(this).closest('div.search')

我怎么知道我在哪个范围？

3 个答案: