Question

我正在尝试使用html5（contenteditable =“true”）和jquery创建一个可编辑的框（类型为richTextBox）。我需要找到可编辑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”）中的每个元素的类型做一些事情。找到（“*”）因为所有元素都不同。任何帮助，将不胜感激。感谢

Answer 1

您需要从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());
})

Answer 2

更改此行

警报（item.position（））;

到

警报（$（项目）.POSITION（））;

无法在JQuery $ .each循环中获取position（）

2 个答案: