How do I access the elements that are inside the 'this' that I am currently working with?

Question

How do I access the elements that are inside the 'this' that I am currently working with ?

Following is the HTML code I am currently working with.

<div class="expander" id="edu">educational qualifications
             <ul class="list">
                 <li>bachelor's in cs</li>
                 <li><div  class="expander">master's in machine learning
                     <ul class="list" id="edu1">
                         <li>authored the famous paper on giving a shit</li>
                         <li>co-authored several other papers</li>
                     </ul></div>
                 </li>
                 <li><div class="expander">phd in visual intelligence
                     <ul class="list">
                         <li>watch and learn</li>
                         <li>haha.</li>
                     </ul></div>
                 </li>
                 <li>cleared jee mains</li>
                 <li>cleared cbse aissce</li>
             </ul></div>

I was experimenting with my new found knowledge of Javascript and I wanted to make it such that all the bullet points would be hidden until I hovered over their headings. I tried to use the following javascript code for that :

$(document).ready(function() {
$('li ul').hide();
$('.expander').mouseenter(function(){
    $(this + 'ul').fadeIn('fast');
}); });

I'm not able to get it to work. How do I access the elements that are inside the 'this' that I am currently working with ?

possible duplicate of [$(this) selector and children?](http://stackoverflow.com/questions/306583/this-selector-and-children) — Kevin B, May 06 '13 at 18:52

Adil Shaikh · Accepted Answer · 2013-05-06T19:25:30.267

4

try this -

$('ul',this).fadeIn('fast');

Edit -

$('.expander ul').hide();
$('.expander').mouseenter(function () {
    $('ul:first',this).fadeIn('fast');
});

Demo --> http://jsfiddle.net/mohammadAdil/jahR6/

edited May 06 '13 at 19:25

answered May 06 '13 at 18:50

Adil Shaikh

44,509
17
89
111

I did this but this reveals all of the bullet points, even those that are placed in another
– Harry May 06 '13 at 18:57
Thanks! This works! But I don't think it would work in case I had three levels of nesting of the
– Harry May 06 '13 at 19:05

score 1 · Answer 2 · answered May 06 '13 at 18:51

1

Variant #1:

$('ul', this).fadeIn('fast');

Variant #2:

$(this).find('ul').fadeIn('fast');

They are equivalent.

answered May 06 '13 at 18:51

dfsq

191,768
25
236
258

I'd go for the context rather than `find`. It's one less function call, and less code. – Joseph May 06 '13 at 18:52
2

@JosephtheDreamer less code - yes, less function call - no. Internally jQuery will use find anyway. – dfsq May 06 '13 at 18:53

score 1 · Answer 3 · answered May 06 '13 at 18:51

1

Try

$(this).find('ul').fadeIn('fast');

answered May 06 '13 at 18:51

Sarath

9,030
11
51
84

How do I access the elements that are inside the 'this' that I am currently working with?

3 Answers3