Question

更新

我正在尝试定位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                    
        });
    });
};

Answer 1

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

至于突出显示的内容，我建议使用叠加模式（请参阅http://codemirror.net/demo/mustache.html作为示例），而不是尝试使用DOM修改（由于上面列出的原因）。

Answer 2

就像@Raminson所说，你可以定位<pre>标签，使背景跨越整个部分。这是你在找什么？

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

如何在两个元素之间定位文本

2 个答案: