jQuery get nested <a> element attribute inside div element

Question

The object on the page

<DIV style="TEXT-INDENT: 0px; VISIBILITY: inherit" id=button46 jQuery16107163179349561973="2">
    <A title=Exit href="javascript:void(null)" name=button46anc>
        <IMG style="CURSOR: pointer" border=0 name=button46Img alt=Exit src="images/btn-exitoff.gif" width=66 height=39>
    </A>
</DIV>

I need to get the value of the title attribute from the div.

Put a few hours into this with no luck (all return undefined)

$('div [id^="button"]').bind('click mouseover mouseout submit',function(event){
    testThis = $(this.children('a'));alert($(testThis).attr('title'));
    testThis2 = $(this.find('a'));alert($(testThis2).attr('title'));
});

Thanks in advance for saving th rest of my hair.

jk. · Accepted Answer · 2011-08-20 20:33:36Z

3

$('div[id^="button"]').bind('click mouseover mouseout submit', function(event) {
    testThis = $(this).children('a');
    alert(testThis.attr('title'));
});

answered Aug 20, 2011 at 20:33

jk.

14.4k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user113716 Over a year ago

+1 Since you also got rid of the incorrect descendant selector.

jk. Over a year ago

@patrick dw seen you around SO. Love you. I consider it a high compliment. Thanx.

Peter Over a year ago

looks like I can use children or find() if I need to get a specific element type - one faster/better than the other?? Thanks so much for the help.

jk. Over a year ago

@Peter From the jquery docs: The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree. Children would be faster in this case.

Guffa · Accepted Answer · 2011-08-20 20:33:16Z

0

The contents of this is not a jQuery object, it's a DOM element. Wrap it in a jQuery object to use the children and find methods, and then you don't need to wrap the result:

$('div [id^="button"]').bind('click mouseover mouseout submit',function(event){
  var testThis = $(this).children('a'); alert(testThis.attr('title'));
  var testThis2 = $(this).find('a'); alert(testThis2.attr('title'));
});

Also, declare the variable locally, so that they don't end up in the global namespace.

Another variation is to use the DOM element as context for a search:

var testThis = $('a', this);

answered Aug 20, 2011 at 20:33

Guffa

703k111 gold badges760 silver badges1k bronze badges

2 Comments

Peter Over a year ago

Thanks. Understand the need to declare locally - this was just to test so I didn't go local with "var". Can't do a global on the a elements as I ONLY need those whose div id begins with 'button'.

Guffa Over a year ago

@Peter: The last variation doesn't do a global search, it only searches inside the element that this refers to. See the context parameter: api.jquery.com/jQuery

jfriend00 · Accepted Answer · 2011-08-20 20:33:53Z

0

You need to turn this into a jQuery object before you can use jQuery functions on it.

$('div [id^="button"]').bind('click mouseover mouseout submit',function(event){
    alert($(this).find('a')).attr('title'));
});

answered Aug 20, 2011 at 20:33

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

2 Comments

Peter Over a year ago

Thanks to ALL for the help - have to do this more instead of beating my brain to death.....

jfriend00 Over a year ago

Since you're new here, I'll explain that you should vote up the answers that helped you and click on the checkmark by whichever one best answers your question. That both encourages and rewards people for helping (they get points) and helps sort out which answers provided better information for those who might read this Q&A sometime later.

Collectives™ on Stack Overflow

jQuery get nested <a> element attribute inside div element

3 Answers 3

4 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related