5

我正在尝试使用html5（contenteditable =“true”）和jquery制作一个可编辑的框（一种richTextBox）。我需要找出可编辑 div 中每个元素的位置，以便可以像 microsoft word 那样插入分页符。这是页面

<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对象从 中取出item，就像position()方法一样jQuery，因此抱怨position()不是函数

$(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

更改此行

警报（项目。位置（））；

至

警报（$（项目）。位置（））；

于 2012-05-24T07:30:28.750 回答