title: How to select a run of sibling elements with jQuery?
body: <p>I'm working on a userscript to interact with a 3rd-party site so I have no control over how it does its layout.</p>
  
  <p>It has a list but what is visually each element in the list is not wrapped in a single element but represented in the DOM as a "run" of several sibling inline elements. Each run of siblings is separated by a <code>&lt;br&gt;</code>.</p>
  
  <p>I'm looking for a selector that will be able to select any such run in a single jQuery object. Here is an abstraction of the format:</p>
  
  <pre><code>&lt;div class="list"&gt;
    &lt;a href="#" class="foo"&gt;Jack&lt;/a&gt;&amp;nbsp;&lt;span class="bar"&gt;77&lt;/span&gt;&lt;br&gt;
    &lt;a href="#" class="foo"&gt;Fred&lt;/a&gt;&amp;nbsp;&lt;span class="bar"&gt;23&lt;/span&gt;&lt;span class="bar"&gt;11&lt;/span&gt;&lt;br&gt;
    &lt;a href="#" class="foo"&gt;Bob&lt;/a&gt;&amp;nbsp;&lt;span class="bar"&gt;101&lt;/span&gt;&lt;br&gt;
    &lt;a href="#" class="foo"&gt;Joe&lt;/a&gt;&amp;nbsp;&lt;span class="bar"&gt;12&lt;/span&gt;&lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So the pattern in a kind of pseudo-regular-expression notation is always:</p>
  
  <blockquote>
    <p><code>foo</code> <code>bar</code> <code>{0,2}</code> <code>br</code></p>
  </blockquote>
  
  <p>It doesn't matter whether the selector includes the final <code>br</code> or not but it must include the anchor followed by 0, 1, or 2 <code>bar</code>s. If it's easier to make something that selects 0 or more <code>bar</code>s that's also fine though there will never be more than two in the DOM.</p>
  
  <p>Since it uses non-breaking spaces between elements, it's probably important that the selected jQuery object includes them too.</p>
  
  <p>(I will be rearranging the items in the list so want to be able to treat them as units. It's also a good jQuery learning exercise!)</p>