Question

在下面的代码中，我绑定了span的click事件，以便触发checkTOC函数。

在该函数中，我在count变量中存储匹配元素的计数。只要在页面加载后内容未更改，这种方法效果很好。但是，count的值似乎不受#content div的帖子页面加载更改的影响。

如何更改代码以使计数反映#content html的更新值？

if(typeof jQuery!="undefined")
    {
        jQuery(document).ready(function($)
        {

        var checkTOC = function()
        {
            //find the count of <!--nextpage--> elements
            var count = jQuery('#content').html().split("&lt;!--nextpage--&gt;").length - 1;

            alert(count);//ALWAYS RETURNS THE INITIAL COUNT, REGARDLESS IF ACTUAL COUNT IS CHANGED AFTER PAGE LOAD VIA HTML EDITING

            var pageurl = jQuery("#view-post-btn a").attr("href");
            var htmlStrTOCpre = jQuery("#cb2_customTOC").text();
            var htmlStrTOC  = '<summary>Table of Contents</summary>\n';
            htmlStrTOC += '<ol>\n';
            htmlStrTOC += '    <li><a href="'+pageurl+'">Introduction</a></li>\n';

            for (var i = 2; i < count+2; i++) {
                htmlStrTOC += '    <li><a href="'+pageurl+i+'/">Page'+i+'</a></li>\n';
            }

            htmlStrTOC += '</ol>';

            jQuery("#cb2_customTOC").val(htmlStrTOC);
        }

        jQuery("#cb-toc-click").bind("click", checkTOC);

        });
    }

HTML代码

<span id="cb-toc-click">Paste Table of Contents</span>

Answer 1

您可以使用vanilla JS或者#content的子节点递归遍历DOM并检查其element.nodeType值。如果它等同于Node.COMMENT_NODE（或只是8，如果您更喜欢幻数;），那么这意味着您正在处理评论。考虑到这一点，您可以构建任何类型的逻辑：

var commentCount = 0;
//anonymous function to be called recursively
(function(D) {
    //if this is a comment, increment the counter
    8===D.nodeType&&commentCount++;
    //call the same function recursively for every child node
    D=D.firstChild;
    while (D) {
        arguments.callee(D);
        D=D.nextSibling;
    }
})(document.getElementById('content'));//start with #content

Fiddled

话虽如此，我同意评论说如果你能控制标记，有更好的方法来处理这个任务。

Answer 2

alert（count）始终返回相同的值。与...相同 alert（jQuery（'＃content'）。html（）） -

问题在于编辑器内容不在jQuery('#content')中，因为tinymce在编辑器初始化时创建了一个可信的iframe，然后用于编辑内容。这个背景会被写回几个重要的事件。

要获取最近的编辑器内容，您应该使用以下

$(tinymce.get('your_editor_id').getBody()).html();

jQuery获取元素的html（）的更新值

2 个答案: