1

下面更新

我正在尝试以codemirror的输出为目标，并向模块元素添加一些自定义事件和样式。

Codemirror 显示以下代码。

<div><module type="content"></module><span>can contain other data</span></div>

在 DOM 中，它在一系列跨度之间呈现。

<pre>      
    <span class="cm-tag">&lt;div&gt;&lt;module</span> 
    <span class="cm-attribute">type</span>
    =
    <span class="cm-string">"content"</span>
    <span class="cm-tag">&gt;&lt;/module&gt;&lt;span&gt;</span>
    can contain other data
    <span class="cm-tag">&lt;/span&gt;&lt;/div&gt;</span>
</pre>

我遇到的问题是尝试为整个模块元素添加黄色背景，但由于“=”部分位于两个元素之间，我不确定如何使用选择器来定位它。

这就是我现在所拥有的，但是因为它不包括元素之间的文本，所以背景颜色存在间隙。

    $('.cm-tag:contains("<module")').each(function () {
        var $closingElement;
        $(this).nextAll().each(function () {
            if ($(this).text() == "></module>") {
                $closingElement = $(this).next();
                return false;
            }
        });
        var $module =$(this).add($(this).nextUntil($closingElement));

        $module.addClass('module');
    });

任何人都对如何实现这一点有建议/想法？

更新 通过使用 wrapAll jquery 方法，我能够部分到达那里，但可见的结果仍然不太正确。现在空格和等号从被包裹的元素中移除并放在它之后。

<modulename"content"id"1234"/> = =

function hilightModules() {
    $('.cm-tag:contains("<module")').each(function() {
        var $module = $(this);

        $(this).nextAll().each(function() {
            $module = $module.add($(this));

            // closing element
            if ($(this).hasClass('cm-tag')) {
                return false;
            }
        });

        $module.wrapAll('<span class="module" />').click(function() {
            // Do stuff                    
        });
    });
};
4

2 回答 2

1

要将单击处理程序添加到内容文本，最好的办法是在 CodeMirror 包装器元素上注册一个 mousedown 处理程序，并在该处理程序中确定单击的内容是否是您要查找的内容。内容元素可能随时更改，您不想注册大量的处理程序。

至于突出显示的东西，我建议使用覆盖模式（参见http://codemirror.net/demo/mustache.html的示例），而不是尝试使用 DOM munging（出于上面列出的原因）。

于 2012-05-30T13:10:36.080 回答
0

就像@Raminson 所说，您可以定位<pre>标签以使背景跨越整个部分。这是你想要的？

http://jsfiddle.net/ckaufman/CSzny/

于 2012-05-16T20:14:57.423 回答