別の要素を前置した後の要素のoffset()

I'm having an issue with jQuerys offset()

ドキュメントに というコードがあります。ドキュメントの準備ができたら、そのイメージをdivにラップし、テキストの前に追加します。次に、イメージのオフセットが必要です。

前置詞が終わった後、どうやってイメージのオフセットを得ることができますか?

サンプルコードは次のとおりです:


<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

    <title>Image Offset Problem!?</title>

    <script type="text/javascript">
        $(document).ready( function(){
            $img = $('#demoimg');

           //I hope this has nothing to do with it... it's just too big
            $img.width(800);

            var $prependDiv = $('<div>Some text</div>');
            var $wrap = $img.wrap('<div id="wrapper">').parent();
            //$wrap.prepend($prependDiv);

           //Here I need to use the FINAL offset, the one with the value that shows when we click the button.
           //Instead, I get something else!
            var imgOffset = $img.offset();
            console.log('offset().top = ' + imgOffset.top);
        });

    </script>
</head>

<body>
    
    <input type="button" value="View image offset().top" onclick="calculateOffset()" />
</body>

<script type="text/javascript">
    function calculateOffset() {
        console.log('offset().top = ' + $('#demoimg').offset().top);
    };
</script>

I need to access the offset().top right there in the $(document).ready() function.

Is there a way to do this? Thanks.

1
私はあなたの質問を再開しました。解決策として回答を追加してください。
追加された 著者 Adam Lear,

1 答え

dom参照が変更されたので、 .wrap()を使用してそれをラップした後、 $ img を再定義する必要があると思います。

このような要素を再選択してみてください:

var imgOffset = $('#demoimg').offset();

.wrap()の後に $ img を再定義してください:

...
$img = $('#demoimg');
var imgOffset = $img.offset();
...
0
追加された
FFでは、document.ready()では13を出力しますが、ボタンのクリックでは28
追加された 著者 ieeehh,