Question

显然我并不完全理解'this'选择器，因为它根本没有按预期工作。

在下面的html / css中，我有三个相同的div元素，每个元素包含一个相同的段落。

第一个div，我给了一个'x'类，显示了我如何期望div.y出现。我给'y'类的第二个div是我最初编写代码的方式。第三个div不受jQuery的影响，只是为了展示在jQuery之前如何设置div的样式。

我遇到的问题是我预期因为表达式针对特定元素中的所有段落，'this'选择器会选择那些段落而不是父函数中的目标元素。

有人可以向我解释为什么类y的jQuery可以工作而类x的jQuery却没有？

编辑：我不是要求如何获得具体结果。我问为什么我得到的结果是我。我想更好地理解“这个”是如何运作的。

HTML：

<div class='x'><p>Lorem</p></div>
<div class='y'><p>Lorem</p></div>
<div><p>Lorem</p></div>

的CSS：

div {
    background-color:#658923;
    height:75px;
    width:75px;
    margin:10px;
    overflow:hidden;
}
p {
    width:50px;
}
.a {
    background-color:#ff5555;
}

jQuery的：

$(document).ready(function() {
    $('div.x').each(function() {
        $('p',this).each(function(){
            $(this).addClass('a').css({
            'height':$(this).outerWidth()
            });
        });
    });
    $('div.y').each(function() {
        $('p',this).addClass('a').css({
            'height':$(this).outerWidth()
        });
    });
});

Answer 1

我会详细检查您的代码和/*comment*/ this所指的内容。

$(document).ready(function() {
    // this == document
    $('div.x').each(function() {
        // this == <div class="x">
        $('p',this).each(function(){
            // this == <p>
            $(this).addClass('a').css({
                'height':$(this).outerWidth() // this == <p> **
            });
        });
    });
    $('div.y').each(function() {
        // this == <div class="y">
        $('p',this).addClass('a').css({
            'height':$(this).outerWidth() // this == <div class="y"> **
        });
    });
});

所以在第一种情况下，您获得了outerWidth的{{1}}，而在第二种情况下，您获得了p的{{1}}。这就是为什么一个人的行为不同于另一个人。修复它取决于你的目标是什么，给定的代码不会那么明显。

为什么'this'选择器没有调用所选元素？

1 个答案: