JS, Highlight content between comments

Question

I have few comments in my code, like this:

<!-- DebugDataTemplateBegin  {"template":"one"} -->
<div class="row notices" id="admin">
   comment One content
</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->

<!-- DebugDataTemplateBegin  {"template":"two"} -->
<div class="row notices" id="admin">
   comment Two content
</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->

and I have anchors like this:

<a href="#"> one </a> <br/>
<a href="#"> two </a>

These links content corresponds to the comments 'template' element, what I want to achieve is that when the user hover over any of these links it's correspondence content (between the comment) will be highlighted.

I started a simple jsfiddle example http://jsfiddle.net/Banzay/md79aaby/ , but not sure if this is even possible.

Sorry if I didn't explain this very well.

Youssef

So basically you want to be able to select comments in jquery ? http://stackoverflow.com/questions/1623734/selecting-html-comments-with-jquery — Cyril Duchon-Doris, Sep 03 '14 at 14:45

score 1 · Accepted Answer · answered Sep 03 '14 at 15:28

Cleaned up my answer above and removed it.

You might have to change the parent you are looking for comments in. And the regex could use some love but this is the general idea.

HTML:

<!-- DebugDataTemplateBegin {"template":"one"} -->
    <div class="row notices" id="admin">comment One content</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->
<!-- DebugDataTemplateBegin {"template":"two"} -->
    <div class="row notices" id="admin">comment Two content</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->
<a href="#one"> one </a> 
<br/>
<a href="#two"> two </a>

JS:

var getComment = function (templateName) {
    return $("body").contents().filter(function () {
        return this.nodeType == 8 && this.nodeValue.match(RegExp('DebugDataTemplateBegin.*'+templateName));
    })
}

$('a').hover(function () {
    var templateName = this.href.split('#')[1];
    var comment = getComment(templateName);
    var element = $(comment).next();
    element.toggleClass('highlight');
})

http://jsfiddle.net/md79aaby/18/

Hi Sorry to bother you again, I have one more thing, how would you get the content if one div have no closing tag, please have a look here: http://jsfiddle.net/Banzay/md79aaby/21/, as you can see now when I hover one all of them changes to red, and if I try to hover over two and three no thing happins — Youssef, Sep 03 '14 at 17:31

JS, Highlight content between comments

1 Answers1