Question

我正在尝试从列表中获取具有某个类的元素。

我大致有以下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>

现在我想在悬停时更改一些类，这只会影响作为hovered元素的子元素的元素，但我无法使其工作。到目前为止，我尝试了以下（所有没有预期的结果）：


$('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');


});

有没有人知道如何处理这个因为我出去了..

Answer 1

您正在使用.hover()，当鼠标进入选择器匹配的元素时，以及鼠标离开时，都会调用此函数。尝试使用.mouseenter()
您正在使用.each()功能，而您似乎需要.find()。
```
$(this).find('.text').removeClass('active');
```
您正在使用带有选择器的.next()，我想您想在下一个元素中找到文本，如下所示：
```
$(this).next().find('.text').addClass('active');
```

Answer 2

由于.text div不是您悬停的列表项的直接子项，因此您需要：

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

Answer 3

$('ul#list li').hover(function(){
    $(this).find(".text").toggleClass("active");
});

Answer 4

尝试 -

$('ul#list li').hover(function(){
    $('.text').removeClass('active');
    $(this).find('.text').addClass('active');
});

演示 - http://jsfiddle.net/sKShf/

Answer 5

jQuery children（）方法只返回DOM树中一个节点的子节点。要查找与选择器匹配的节点下的所有DOM项，请使用find（）

在此处查看演示：http://jsfiddle.net/2VWvh/

$('ul#list li').hover(function(){
     // remove all pre`enter code here`vious active classes
    $('ul#list .text').removeClass('active');

    // add active class to current item
    $(this).find('.text').addClass('active');
});

只接近某个类的子元素

5 个答案: