How to find an element within an element

Question

I'm trying to change the font color of a a tag in the hover function of the parent li tag.

I'm trying to do something like this

$('li').mouseover(function () {
   var a = $(this).(NEED TO FIND CORRESPONDING a TAG)
    a.css('color', 'white');
});

Have a look at the documentation: http://api.jquery.com/category/selectors/ — Felix Kling, Sep 12 '11 at 09:59
possible duplicate of [How to select an element by class inside "this" in Jquery](http://stackoverflow.com/questions/4868599/how-to-select-an-element-by-class-inside-this-in-jquery) — Felix Kling, Sep 12 '11 at 10:01

Jose Faeti · Accepted Answer · 2011-09-12T10:04:48.730

$(this).find('a');

This will find the <a> element inside the <li> element.

Even better:

$('li a').mouseover(function () {
   var a = $(this); // this now refers to <a>
    a.css('color', 'white');
});

Using the selector wisely you can save time by avoiding additional function calls.

Even better, use only a single event listener for the mouse over event, in the parent <ul> tag.

$('ul').mouseover(function (e) {
    var a = $(e.target); // e.target is the element which fired the event
    a.css('color', 'white');
});

This will save resources since you only use a single event listener instead of one for each <li> elements.

score 2 · Answer 2 · answered Sep 12 '11 at 09:59

2

Try:

var a = $(this).find("a");

answered Sep 12 '11 at 09:59

Igor Dymov

score 1 · Answer 3 · answered May 18 '12 at 12:03

1

You can use jQuery .find() to find elements

answered May 18 '12 at 12:03

score 1 · Answer 4 · answered Sep 12 '11 at 10:00

1

$('li').mouseover(function () {
   var a = $("a", this);
   a.css('color', 'white');
});

The second argument specifies the context. So it finds all a in the context of this which is the li

answered Sep 12 '11 at 10:00

Rolando Cruz

score 0 · Answer 5 · answered Sep 12 '11 at 10:01

0

If your parent tag is

<li> and your child tag is <div>

then you can find child tag by using this :

$('li').mouseover(function () {
  var innerElement=$(this).find("div");
  innerElement.css('color', 'white');
}

answered Sep 12 '11 at 10:01

Tushar Ahirrao

5 Answers5