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>

私が抱えている問題は、モジュール要素全体に黄色の背景を追加しようとしていることですが、「=」部分が 2 つの要素の間にあるため、セレクターで対象にする方法がわかりません。

今持っているのはこれなのですが、要素の間にテキストが入っていないので、背景色に隙間があります。

    $('.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ラッパー要素にマウスダウンハンドラーを登録し、そのハンドラーで、クリックされたものが探しているものであるかどうかを判断することです。コンテンツ要素はいつでも変更される可能性があり、大量のハンドラーを登録する必要はありません。

強調表示については、DOMの変更(上記の理由)ではなく、オーバーレイモード(例についてはhttp://codemirror.net/demo/mustache.htmlを参照)をお勧めします。

于 2012-05-30T13:10:36.080 に答える
0

@Raminsonが言ったように、<pre>タグをターゲットにして、背景がセクション全体に及ぶようにすることができます。これはあなたが探しているものですか?

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

于 2012-05-16T20:14:57.423 に答える