0

ダン、私はそれを理解しました... 以下を参照してください。私がクエリしていたdivレイヤーは、CSSを介して非表示になり、位置クエリの後にJSで表示されました。非表示になっているのを見たことがなかったので、非表示になっていることに気づきませんでした。そのため、jQueryは0,0を返しました。

私は馬鹿のように感じます。

以下のコードは説明を目的としたものであり、必要と思われるすべてのコードが含まれていますが、重要なCSS定義と重要なJS呼び出しが省略されています。

メニュー項目用のいくつかのサブdivレイヤーを持つdivレイヤーがあります。 

<div id="menuItems">
    <div id="menuItem0">Menu Item 0</div>
    <div id="menuItem1">Menu Item 1</div>
</div>

位置と寸法は外部CSSで定義されます。

#menuItem0 { top: 0px; left: 100px; height: 40px; width: 200px; background-color: green;}
#menuItem1 { top: 0px; left: 350px; height: 40px; width: 200px; background-color: red;}

そして、ロード時に、スクリプトはメニュー項目の位置と寸法を表示することになっています。

$(window).load(function () {
    prepareMenuItems();    
});

function prepareMenuItems() { 
    var numberOfMenuItems = $("#menuItems").children().length;

    for (var i=0; i<numberOfMenuItems; i++) {
        console.log("left: "+$("#menuItem" + i).position().left + 
            " top:" + $("#menuItem" + i).position().top +
            " w:" + $("#menuItem" + i).width() + 
            " h:"+ $("#menuItem" + i).height());
    }
}

私のライブデモでは、Google Chrome（最新）に表示されるものは次のとおりです。左：0上：0 w：200 h：40左：0上：0 w：200 h：40

左と上は、あるべきではないときにゼロです。

ページが読み込まれ、しばらくすると、Chromeデバッガーが$（ "＃menuItem0"）。position（）。leftの時計を適切に評価します。しかし、なぜそれはロードされないのですか？それは正しい幅と高さを吐き出すので、CSSは明らかにロードされています。そして、強制的な休憩が正しい答えを与えるので、後で答えを知っているので、これは私が間違ったものの位置を見ているのではありません。

ヘルプ！それは私を怒らせています。

（以前のタイプミスについては、文字通りではなく説明しようとしていたのですが、人々が特定のコードをテストすることに気づいていませんでした。 マグリットはFiddlerを介してテストし、コードは期待どおりに機能するため、外部参照と関係があるはずです。 CSSやJSなどに...）。

4

4 に答える 4

1

私はそれを理解しました...私はばかでした...CSSルールの1つが最初に親divを非表示にし、数ミリ秒後にコードを表示することに気づきませんでした。したがって、jQueryがレイヤーが非表示の位置を照会していた時点で、jQueryの動作は（私は気づきませんでした）divが非表示のときに0を返すことです。数ミリ秒後にレイヤーが表示され、休憩中にjQueryが期待どおりに機能しました。もちろん、その秘密は、最初にその親 div レイヤーを非表示にしないことでした。

回答してくださった方々、ありがとうございます。あなたたちはそれを見て、私の愚かなタイプミスを修正し、私の主張をよりよく証明するために動作するデモを作成するために私にそれをさらに調べさせてくれました（それが私を解決策に導きました）。

于 2013-03-19T20:21:35.477 に答える
0

私のために働くようです、あなたはいくつかのタイプミスを持っています：http: //jsfiddle.net/MQfqA/1/

function prepareMenuItems() { 
    var numberOfMenuItems = $("#menuItems").children().length;

    for (var i=0; i<numberOfMenuItems; i++) {
        console.log("left: "+$("#menuItem" + i).position().left + 
            " top:" + $("#menuItem" + i).position().top +
            " w:" + $("#menuItem" + i).width() + 
            " h:"+ $("#menuItem" + i).height());
    }
}
于 2013-03-19T19:13:40.200 に答える
0

構文が間違っていました。これで動作するようになりました

$(document).ready(function () {
    prepareMenuItems();    
});

function prepareMenuItems() { 
    var numberOfMenuItems = $("#menuItems").children().length;

    for (var i=0; i<numberOfMenuItems; i++) {
        console.log("left: "+$("#menuItem" + i).position().left + 
            " top:"+$("#menuItem" + i).position().top+
            " w:"+$("#menuItem" + i).width() + 
            " h:"+ $("#menuItem" + i).height());
    }
}
于 2013-03-19T19:15:32.500 に答える
0

私の印象ですか、それとも 11 行目の見積もりを閉じるのを忘れていましたか?

于 2013-03-19T19:15:39.933 に答える