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

How to target text between two elements

本文关键字：元素 之间 文本 两个 何定位 定位      更新时间：2023-09-26

更新如下

我正在尝试针对代码镜像的输出，并向模块元素添加一些自定义事件和样式。

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                    
        });
    });
};

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

至于突出显示内容，我建议使用覆盖模式(有关示例，请参阅 http://codemirror.net/demo/mustache.html(，而不是尝试使用 DOM mging(出于上面列出的原因(。

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

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

相关文章：