獲取具有開始和結束標記的評論之間的元素

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：

我希望我解釋這個好。

優素福

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> 

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

已更新DEMO

額外：你有不同的元素具有相同的ID，它們應該是不同的！