0

I'm working on a userscript to interact with a 3rd-party site so I have no control over how it does its layout.

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 <br>.

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:

<div class="list">
  <a href="#" class="foo">Jack</a>&nbsp;<span class="bar">77</span><br>
  <a href="#" class="foo">Fred</a>&nbsp;<span class="bar">23</span><span class="bar">11</span><br>
  <a href="#" class="foo">Bob</a>&nbsp;<span class="bar">101</span><br>
  <a href="#" class="foo">Joe</a>&nbsp;<span class="bar">12</span><br>
</div>

So the pattern in a kind of pseudo-regular-expression notation is always:

foo bar {0,2} br

It doesn't matter whether the selector includes the final br or not but it must include the anchor followed by 0, 1, or 2 bars. If it's easier to make something that selects 0 or more bars that's also fine though there will never be more than two in the DOM.

Since it uses non-breaking spaces between elements, it's probably important that the selected jQuery object includes them too.

(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!)

hippietrail
  • 15,848
  • 18
  • 99
  • 158
  • 1
    Do you really need the `bar`s? They are empty elements – which means they are pretty useless. (One could insert them into a real list later) It looks to me as if the list item are the links; so to get them just query all `.foo`… – feeela Oct 19 '12 at 09:49
  • 2
    @feeela: Sorry none of the elements are empty in the real code, this is just an abstraction to make it easier to focus on the problem and make it useful for others in similar situations, without the distractions of the real code's details. – hippietrail Oct 19 '12 at 11:46
  • I'm coming to the opinion that this can't be done with selectors alone, but there are many ways to achieve it with other jQuery/js functionality. The best is almost certainly going to use [`.contents`](http://api.jquery.com/contents/) paired with [`.slice()`](http://api.jquery.com/slice/). – hippietrail Oct 22 '12 at 08:19

0 Answers0