突出顯示兩個元素之間的所有文本

Question

給定以下html示例，我想突出顯示兩個圖像標簽之間的所有文本（通過添加css background屬性）。 我嘗試使用jquerys .nextUntil（），但是它僅使用第一個元素的同級節點，因此在這種情況下將不起作用。

編輯：下面的圖像標簽旨在用作不可見的占位符，表示我的文本編輯器中具有相應ID的注釋的起點和終點，中間的所有內容均是注釋的焦點。

<div>
    <p>
        Lorem ipsum dolor
        <img class="commentBoundaryStart data-commentid="1" src="img.png"/>
          sit amet,"
    </p>
    <p>
        consectetur adipiscing elit. 
    </p>
    <h2>Header</h2>
    <p>
         Sed maximus laoreet augue
        <img class="commentBoundaryEnd" data-commentid="1" src="img2.png"/>
         , in ultrices sapien lobortis eu.
    </p>
    <p>
        Loremmmmm
    </p>
</div>

Answer 1

使用特定的標記（ img在p ，深度不大），您可以執行以下操作：

 // as you can't style text nodes, we first replace them // with span elements. // This must be done only once and is independent of the // image markers $('p').each(function(){ var nodes = this.childNodes; for (var i=0; i<nodes.length; i++) { if (nodes[i].nodeType===3) { var text = nodes[i].textContent; var span = document.createElement("span"); span.appendChild(document.createTextNode(text)); this.replaceChild(span, nodes[i]); } } }); // now, we colorize the first p $('.commentBoundaryStart').nextUntil('.commentBoundaryEnd') .css('color', 'red'); // the following ones $('p:has(.commentBoundaryStart)') .nextUntil(':has(.commentBoundaryEnd)').css('color', 'red'); // and the last one $('p:has(.commentBoundaryEnd)').find('.commentBoundaryEnd') .prevUntil('.commentBoundaryStart').css('color', 'red'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div> <p> "Lorem ipsum dolor" <img class="commentBoundaryStart" data-commentid="1" src="img.png"/> " sit amet," </p> <p> " consectetur adipiscing elit. " </p> <h2>Header</h2> <p> " Sed maximus laoreet augue" <img class="commentBoundaryEnd" data-commentid="1" src="img2.png"/> " , in ultrices sapien lobortis eu." </p> <p> </p> </div> 

如果您的實際HTML更復雜，則可能必須修改代碼。

當然，最好使用addClass而不是css ，這樣可以在移動或刪除圖像時更輕松地進行清理：只需執行$('span').removeClass('betweenMarks') 。

Answer 2

這種情況下可能的解決方案1。

圖像之間僅適用於1 <p> 。 如果您的nextAll大於1 <p> ，並且if具有indexOf img或類似的東西，則需要對其進行一些更改。

 $(function() { //coment start line $('img.commentBoundaryStart').parent().contents().filter(function() { return this.nodeType == 3; }).wrap('<span></span>'); $('img.commentBoundaryStart').next().css("background","red"); //middle lines var has_returned = false; $('img.commentBoundaryStart').parent().nextAll().each(function() { if (has_returned) { return; } if ($(this).contents().hasClass("commentBoundaryEnd")) { has_returned = true; return; } else { $(this).css("background","red"); } }); //end line $('img.commentBoundaryEnd').parent().contents().filter(function() { return this.nodeType == 3; }).wrap('<span></span>'); $('img.commentBoundaryEnd').prev().css("background","red"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <p> "Lorem ipsum dolor" <img class="commentBoundaryStart" data-commentid="1" src="img.png"/> " sit amet," </p> <p> " consectetur adipiscing elit. " </p> <p> " consectetur adipiscing elit. " </p> <span> " consectetur adipiscing elit. " </span> <p> " Sed maximus laoreet augue" <img class="commentBoundaryEnd" data-commentid="1" src="img2.png"/> " , in ultrices sapien lobortis eu." </p> <p> </p> </div> 

Answer 3

從這里的答案中獲得啟發后，我設計了自己的綜合腳本，以無限深度和復雜性的html塊處理此問題。

 $(function () { var root = $('#textarea-0001'); var cid = 1; var startMarker = $("img.commentBoundary[data-commentid='" + cid + "']").first(); var endMarker = $("img.commentBoundary[data-commentid='" + cid + "']").last(); // Wrap start points siblings with span startMarker.parent().contents().filter(function() { return this.nodeType === 3; }).wrap("<span></span>"); // Color its later siblings if they dont have the end point marker var has_done = false; startMarker.nextAll().andSelf().each(function() { if (has_done) { return; } if ($(this).has(endMarker).length > 0 || $(this).is(endMarker)) { has_done = true; return; } else { $(this).css("background-color", "rgba(128, 204, 255, 0.5)"); } }); // Get parents up to root var parentsList = startMarker.parentsUntil(root); if (parentsList.has(endMarker).length === 0) { // go through each of these and access later siblings var has_returned = false; parentsList.each(function() { $(this).nextAll().each(function() { if (has_returned) { return; } if ($(this).has(endMarker).length > 0) { has_returned = true; return; } else { $(this).css("background-color", "rgba(51, 173, 255, 0.5)"); } }); }); }; // find end point marker var endPointContainer = root.children().has(endMarker); // Wrap end points siblings in spans endMarker.parent().contents().filter(function() { return this.nodeType === 3; }).wrap("<span></span>"); // Color earlier siblings if they dont have start marker var is_done = false; $(endMarker.prevAll().andSelf().get().reverse()).each(function() { if (is_done) { return; } if ($(this).has(startMarker).length > 0 || $(this).is(startMarker)) { is_done = true; return; } else { $(this).css("background-color", "rgba(0, 122, 204, 0.5)"); } }); // Get parents up until end pointcontainer var parentsListEnd = endMarker.parentsUntil(endPointContainer); if (parentsListEnd.has(startMarker).length === 0) { // Go through each of these and access earlier siblings var is_returned = false; parentsListEnd.each(function() { $(this).prevAll().each(function() { if (is_returned) { return; } if ($(this).has(startMarker).length > 0 || $(this).is(startMarker)) { is_returned = true; return; } else { $(this).css("background-color", "rgba(0, 61, 102, 0.5)"); } }); }); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="textarea-0001"> <p> Lorem ipsum dolor <img class="commentBoundary" data-commentid="1" src="img.png"/> sit amet, </p> <p> <span> Hello! </span> <span> consectetur adipiscing elit. </span> <h3>Header</h3> </p> <p> consectetur adipiscing elit. </p> <span> consectetur adipiscing elit. </span> <p> Sed maximus laoreet augue <img class="commentBoundary" data-commentid="1" src="img2.png"/> , in ultrices sapien lobortis eu. </p> <p> </p> </div>