Question

I’m trying to get elements with a certain class from a list.

I roughly have the following html

<ul id="list">
<li class="1">
    <div class="container">
        <div class="left">
            <a href="">
                <div class="text">
                    <p>Some text</p>
                </div>
                <div class="image">
                    <img>
                </div>
            </a>
        </div>
        <div class="right">
            <p>Some more</p>
        </div>
    </div>
</li>
<li class="2">
    <div class="container">
        <div class="left">
            <a href="">
                <div class="text">
                    <p>Some text</p>
                </div>
                <div class="image">
                    <img>
                </div>
            </a>
        </div>
        <div class="right">
            <p>Some more</p>
        </div>
    </div>
</li>
<li class="3">
    <div class="container">
        <div class="left">
            <a href="">
                <div class="text">
                    <p>Some text</p>
                </div>
                <div class="image">
                    <img>
                </div>
            </a>
        </div>
        <div class="right">
            <p>Some more</p>
        </div>
    </div>
</li>
</ul>

Now i want to do change some classes on hover which only affect the elements that are children of the hovered element, but i can't get it working. So far i tried the following (all without the desired result):

$('ul#list li').hover(function(){
    // remove all previous active classes
    $(this).each('.text').removeClass('active');


// add active class to current item
$(this).children('.text').addClass('active');
$(this).next('.text').addClass('active');
$(this).closest('.text').addClass('active');

});


Does anybody has an idea how to approach this because i'm out..
												

Answer 1

Since .text divs aren’t direct children of the list items you’re hovering over, you need:

$(this).find('.text').toggleClass('active');