Question

I have a trouble with selecting element attributes with jquery here is my HTML:

<a class="myselector" rel="I need this value"></a>

<div class="someClass" id="someID">
...bunch of elements/content
<input type="button" name="myInput" id="inputID" title="myInput Title" />
...bunch of elements/content
</div>

…bunch of elements/content

Here I’m trying to get the rel value of myselector here is how I tried but its not working :

$('#inputID').live('click',function(){
console.log($(this).closest('a.myselector').attr('rel'));
});

Also tried this since all is wrapped in wrapper div :

$('#inputID').live('click',function(){
console.log($(this).parent('div.wrapper').find('a.myselector').attr('rel'));
});

I get undefined value in firebug in both cases, I use live because div#someID is loaded in the document its not there when page first loads. Any advice, how can I get my selector rel value?

EDIT:

However when I look for ('a.myselector') without rel attribute, I alert Object object and get console.log something []

Answer 1

This should work:

console.log($(this).closest('div.wrapper').find('a.myselector').attr('rel'));

Your first example in your question does not work because the anchor tag you are trying to select is not a parent/ancestor:

console.log($(this).closest('a.myselector').attr('rel'));

Your second example would work if you changed .parent() to .parents(), as .parent() only traverses one level up the DOM, so the following:

console.log($(this).parents('div.wrapper').find('a.myselector').attr('rel'));