0

我希望 Jquery 将一个类添加.pointer到.staff-containerif<a href="">存在于.staff-picture.

我的jQuery：

if($('.staff-container').find('.staff-picture').closest('a').length) {
    $(this).addClass('pointer');
}

上面的 jquery 没有添加任何类，我做错了什么？

我的CSS：

.pointer {
    cursor:pointer !important;
}

我的 HTML：

<div class="teachers">
    <div class="span12">
        <div class="scroll transparent">
            <div class="staff-outer-container">
                <div class="staff-container">
                    <div class="staff">
                        <div class="staff-picture">
                            <a href="http://ahmedmathematics.weebly.com/index.html" target="_blank"><img src="img/people/teachers/ahmed.png" /></a>
                        </div>
                        <p><span class="bold">Mr. Ahmed</span><br />
                        Ext. 13417<br />
                        Room 417/323<br />
                        <a href="mailto:Ahmed@wcskids.net">Ahmed@wcskids.net</a></p>
                    </div>
                </div>
                <div class="staff-container">
                    <div class="staff">
                        <div class="staff-picture">
                            <img src="img/people/teachers/aiello.png" />
                        </div>
                        <p><span class="bold">Mr. Aiello</span><br />
                        Ext. 13328<br />
                        Room 328/323<br />
                        <a href="mailto:ASusan@wcskids.net">ASusan@wcskids.net</a></p>
                    </div>
                </div>
                <div class="staff-container">
                    <div class="staff">
                        <div class="staff-picture">
                            <a href="http://www.mraiosa.com/class/Home.html" target="_blank"><img src="img/people/teachers/aiosa.png" /></a>
                        </div>
                        <p><span class="bold">Mr. Aiosa</span><br />
                        Ext. 13419<br />
                        Room 419/323<br />
                        <a href="mailto:BAiosa@wcskids.net">BAiosa@wcskids.net</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
4

5 回答 5

8

你可以这样做 ：

$('.staff-picture a').closest('.staff-container').addClass('pointer');

我希望逻辑从代码中是显而易见的。

于 2013-05-13T14:45:32.277 回答
3

我将首先遍历.staff-containerdiv，然后使用条件来确定哪些具有使用对象作为上下文的a标签：this

//Goes through all the .staff-picture divs
$('.staff-container').each(function(){

    //If the a tag exists within the current .staff-picture (returned object isn't undefined)
    if($('a', this).html() != undefined){

        //Add the class if a exists
        $(this).addClass('pointer'); 
    }

});

http://jsfiddle.net/y9ZKG/

编辑

抱歉，我指的是员工容器，而不是员工图片。但是，两者都行。

第二次编辑

此外，如果您好奇为什么您的原始方法不起作用，那是因为您使用的条件（第一个if）没有实例化this对象。也就是说，this在您的函数内部不存在。

于 2013-05-13T14:53:52.060 回答
1

尝试这个：

var $selector = $('.staff-container');
if($selector.find('.staff-picture').has('a')) {
    $selector.addClass('pointer');
}
于 2013-05-13T14:45:39.890 回答
1

$.closest()向上遍历而不是向下遍历树，因此您没有找到任何东西。查看 jQuery API

于 2013-05-13T14:47:52.753 回答
0

我喜欢用“反向”逻辑来处理这些类型的问题：

$('.staff-picture a').parent().parent().parent().addClass('pointer);

可能有一种方法可以“选择”你的staff-container父级，但如果 DOM 结构没有改变，这很好用。

这首先选择所有 a 链接，然后只应用那些使用 jQuery 强大的选择代码的链接。它不依赖于带有 if 语句的测试。

于 2013-05-13T14:50:37.787 回答