Question

如果.pointer中存在.staff-container，我希望Jquery将一个类<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>

Answer 1

你可以这样做：

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

我希望代码中的逻辑很明显。

Answer 2

我首先遍历.staff-container div，然后使用条件来确定哪些具有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。

Answer 3

试试这个：

var $selector = $('.staff-container');
if($selector.find('.staff-picture').has('a')) {
    $selector.addClass('pointer');
}

Answer 4

$.closest()遍历 up 而非树下，因此您找不到任何内容。 see the jQuery API

Answer 5

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

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

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

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

如果div中存在元素，则Jquery添加类

5 个答案:

修改

第二次编辑