以下を更新
codemirrorの出力をターゲットにして、いくつかのカスタム イベントとスタイルをモジュール要素に追加しようとしています。
Codemirror は、次のコードをそのまま表示します。
<div><module type="content"></module><span>can contain other data</span></div>
DOM では、一連のスパン間でレンダリングされます。
<pre>
<span class="cm-tag"><div><module</span>
<span class="cm-attribute">type</span>
=
<span class="cm-string">"content"</span>
<span class="cm-tag">></module><span></span>
can contain other data
<span class="cm-tag"></span></div></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
});
});
};