5

html5（contenteditable = "true"）とjqueryを使用して編集可能なボックス（richTextBoxの一種）を作成しようとしています。Microsoft Wordのようにページ分割を挿入できるように、編集可能なdiv内の各要素の位置を確認する必要があります。こちらがページです

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>jQuery Context Menu Plugin Demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>


    <script type="text/javascript"> 
        $(document).ready( function() {
            $("#divEdit").keyup(function(){
                $.each($("#divEdit").find("*"), function(i,item){
                    alert(item.position());
                });
            });             
        });
    </script>
</head>

<body>

    <h1>jQuery Context Menu Plugin and KendoUI Demo</h1>
    <div style="width:740px;height:440px" contenteditable="true" id = "divEdit">
        <p>
            <img src="http://www.kendoui.com/Image/kendo-logo.png" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" />
        </p>
        <p>
            Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
            In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
            and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
            accessibility standards and provides API for content manipulation.
        </p>

        <p id="para">Features include:</p>
        <ul>
            <li>Text formatting & alignment</li>
            <li>Bulleted and numbered lists</li>
            <li>Hyperlink and image dialogs</li>
            <li>Cross-browser support</li>
            <li>Identical HTML output across browsers</li>
            <li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
        </ul>
        <p>
            Read <a href="http://www.kendoui.com/documentation/introduction.aspx">more details</a> or send us your
            <a href="http://www.kendoui.com/forums.aspx">feedback</a>!
        </p>
    </div>
</body>

問題は、alert（item.position（））が何もフェッチしていないことです。Firefoxの開発者ツールバーに表示されるエラーは「item.positionは関数ではありません」です。私の推測では、すべての要素が異なるため、$（ "＃divEdit"）。find（ "*"）の各要素のタイプに何らかの影響を与える必要があります。どんな助けでもいただければ幸いです。ありがとう

4

2 に答える 2

9

メソッドと同様に、jQueryオブジェクトをから取得する必要があるため、文句は関数ではありませんitemposition()jQueryposition()

$(item).position() // instead of item.position()

またはさらに簡潔に：

$.each($("#divEdit").find("*"), function(i,item){
   alert(item.position());
}

への変更

$('#divEdit').find('*').each(function() { 
   alert($(this).position());
})
于 2012-05-24T07:27:32.227 に答える
0

この行を変更します

alert（item.position（））;

に

alert（$（item）.position（））;

于 2012-05-24T07:30:28.750 に答える