Question

I have some divs with similar content and links, images etc request extended jQuery-functions.

The divs have unique id’s but their content have similar fields and structure.

For example, the HTML is:

 <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" />

 ...

And the 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.
});

EDIT:
It’s partly a poor example, since the jQuery doesn’t modify anyting, and this is always available..
Imagine an image in both divs that should be hidden by the click-function.
Example updated.

What’s the right path here?

Answer 1

You can use closest() with a selector:

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

Demo: http://jsfiddle.net/AndyE/bR3xv/1/

Alternatively, you could add the event handler to the <div> element and allow the events to propagate to it. event.target would refer to the text element and this would refer to the div:

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

Demo: http://jsfiddle.net/AndyE/bR3xv/