0

「this」セレクターが期待どおりにまったく機能していないため、どうやら完全には理解していないようです。

以下の html/css には、それぞれが同一の段落を含む 3 つの同一の div 要素があります。

「x」のクラスを指定した最初の div は、div.y がどのように表示されるかを示しています。「y」のクラスを与えた2番目のdivは、最初にコードを書いた方法です。3 番目の 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()
        });
    });
});
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"> **
        });
    });
});

したがって、ケース 1 では の が取得され、ケース 2 では の が取得さouterWidthれます。それが、一方が他方と異なる振る舞いをする理由です。それを修正することは、あなたの目標が何であるかに依存します.与えられたコードはそれを非常に明白にしません。pouterWidthdiv

于 2013-03-27T20:48:22.353 に答える