获取带有开始和结束标签的注释之间的元素

Question

I have a links that when hovered will highlight a specific content using comments in the page. Please have a look at this:

http://jsfiddle.net/Banzay/md79aaby/20/

This is what I want to achieve and it is working fine, I have only one issue with it, my content will have an opening div tag that will be closed some where else and this is causing the jsfiddle above to not work properly, I have made a new fiddle and added the div that cause this to break, please have a look here

http://jsfiddle.net/Banzay/md79aaby/22/

Here is the code that works fine before I add the div that cause the problem:

<!-- 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"} -->
<!-- DebugDataTemplateBegin {"template":"three"} -->
    <div class="row notices" id="admin">comment Three content</div>
<!-- DebugDataTemplateEnd {"template":"three"} -->
<a href="#one"> one </a> <br/>
<a href="#two"> two </a><br/>
<a href="#three">three</a>

This is the html with the div added:

<!-- DebugDataTemplateBegin {"template":"one"} -->

    <div> < ===========================

    <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"} -->
<!-- DebugDataTemplateBegin {"template":"three"} -->
    <div class="row notices" id="admin">comment Three content</div>
<!-- DebugDataTemplateEnd {"template":"three"} -->

</div> < ===================================

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

JS code that I am using:

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 templateName = $(this).text().trim();
    var comment = getComment(templateName);
    var element = $(comment).next();
    element.toggleClass('highlight');
})

CSS:

.highlight {
    color: red;
}

I hope I explained this well.

Youssef

Answer 1

Since you can't insert the comment of the template inside the div, you could try to make an if-else clause so you make it different for the first element:

Your HTML:

<!-- DebugDataTemplateBegin {"template":"one"} -->
<div>
    <div class="row notices" id="admin1">comment One content</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->
<!-- DebugDataTemplateBegin {"template":"two"} -->
    <div class="row notices" id="admin2">comment Two content</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->
<!-- DebugDataTemplateBegin {"template":"three"} -->
    <div class="row notices" id="admin3">comment Three content</div>
<!-- DebugDataTemplateEnd {"template":"three"} -->
</div>

The addapted JS:

var getComment = function (templateName) {
if(templateName=="one"){
        //First element, search the comment normally.
        return $("body").contents().filter(function(){return this.nodeType == 8 && this.nodeValue.match(RegExp('DebugDataTemplateBegin.*'+templateName));  }); 
    }else{
        //Other elements, search comments inside the childrens of the body (the div)
    return $("body").children().contents().filter(function () {
        return this.nodeType == 8 && this.nodeValue.match(RegExp('DebugDataTemplateBegin.*'+templateName));
    });}
}

$('a').hover(function () {
    // var templateName = this.href.split('#')[1];
    var templateName = $(this).text().trim();
    var comment = getComment(templateName);
    if(templateName=="one"){
        //The first comment, look for the element inside the div
        var element = $(comment).next().children().first();
    }else{
        //Other comments, looks for them as normally
        var element = $(comment).next();
    }

    element.toggleClass('highlight');
})

Updated DEMO

Extra: You have different elements with the same ID, they should be different!