title: jquery select elements between two elements that are not siblings
body: <p>(I've removed attributes, but it's a bit of auto-generated HTML.)</p>
  
  <pre><code>&lt;img class="p"/&gt;
  &lt;div&gt; hello world
      &lt;p&gt;
          &lt;font&gt;&lt;font size="2"&gt;text.&lt;img class="p"/&gt;
          some text
          &lt;/font&gt;&lt;/font&gt;
      &lt;/p&gt;
      &lt;img class="p"/&gt;
      &lt;p&gt; &lt;font&gt;&lt;font size="2"&gt;more text&lt;img class="p"/&gt;
          another piece of text
          &lt;/font&gt;&lt;/font&gt;
      &lt;/p&gt;&lt;img class="p"/&gt; some text on the end
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to apply some highlighting with backgrounds to all text that is between two closest (in the HTML code) <code>img.p</code> elements when hovering first of them. I have no idea how to do that. Lets say I hover the first <code>img.p</code> - it should highlight <code>hello world</code> and <code>text.</code> and nothing else.</p>
  
  <p>And now the worst part - I need the backgrounds to disappear on mouseleave. </p>
  
  <p>I need it to work with any HTML mess possible. The above is just an example and structure of the documents will differ.</p>
  
  <p>Tip: Processing the whole html before binding hover and putting some spans etc. is OK as long as it doesn't change the looks of the output document.</p>