獲取帶有開始和結束標簽的注釋之間的元素

Question

我有一個鏈接，將鼠標懸停時將使用頁面中的注釋突出顯示特定內容。 請看一下這個：

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

這是我想要實現的，並且運行正常，我只有一個問題，我的內容將帶有一個打開的div標簽，該標簽將在其他地方關閉，這導致上述jsfiddle無法正常工作，我有做了一個新的小提琴並添加了導致此中斷的div，請在這里看看

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

這是在添加導致問題的div之前可以正常工作的代碼：

<!-- 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>

這是添加了div的html：

<!-- 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代碼：

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;
}

我希望我能解釋得很好。

優素福

Answer 1

由於您無法在div內插入模板的注釋，因此可以嘗試創建if-else子句，從而使第一個元素與之不同：

您的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>

新增的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');
})

更新了演示

另外：您具有相同ID的不同元素，它們應該不同！