javascript - Highlight all text between two elements -

javascript - Highlight all text between two elements -

given next illustration html, highlight text between 2 image tags (by adding css background property). have tried using jquerys .nextuntil() uses sibling nodes of first element , in case not work.

edit: image tags below intended invisible placeholders denoting start , end points comment corresponding id within text editor, in-between focus comment.

<div> <p> lorem ipsum dolor <img class="commentboundarystart data-commentid="1" src="img.png"/> sit down 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>

possible solution 1 case.

it works 1 <p> between images. need alter bit if have more 1 <p> nextall , if indexof img or that.

class="snippet-code-js lang-js prettyprint-override">$(function() { //coment start line $('img.commentboundarystart').parent().contents().filter(function() { homecoming 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() { homecoming this.nodetype == 3; }).wrap('<span></span>'); $('img.commentboundaryend').prev().css("background","red"); }); class="snippet-code-html lang-html prettyprint-override"><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 down 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>

javascript jquery html