How do I access the elements that are in the 'this' with which I currently work?

advertisements

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 ?


try this -

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

Edit -

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

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