如何在兩個元素之間定位文本

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 munging（出於上述原因）。

Answer 2

就像@Raminson所說的那樣，您可以定位<pre>標記以使背景跨越整個部分。 這是你想要的？

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