0

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

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

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

我遇到的问题是我预计因为表达式针对特定元素中的所有段落，“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()
        });
    });
});
4

1 回答 1

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，p而在第二种情况下，您将获得outerWidth的div。这就是为什么一个人的行为与另一个人不同的原因。修复它取决于你的目标是什么，给定的代码并不那么明显。

于 2013-03-27T20:48:22.353 回答