Geek asks and answers

How to find an element inside an element

I am trying to change the font color of a tag ain hovera parent tag function li.

I'm trying to do something like this

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

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

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 one event listener to mouse over the event in the parent tag <ul>.

$('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, because you use only one event listener instead of one for each element <li>.

+2
source

Try:

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

The second argument indicates the context. So he finds everything ain a context thisthat isli

+1
source

You can use jQuery . find () to search for items

+1
source

If your parent tag

<li>and your child tag <div>

then you can find the child tag using this:

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

More articles:


All Articles