Databases
StackOverflow2013
Postsdbo
POHow to select a run of sibling elements with jQuery?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to select a run of sibling elements with jQuery?
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. UShippietrail
    1. UShippietrail
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POHow to select a run of sibling elements with jQuery?
      1. USbr3w5
      1. VTFavorite
    1. CODo 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`…
      singulars
      1. POHow to select a run of sibling elements with jQuery?
      1. USfeeela
    2. CO@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.
      singulars
      1. POHow to select a run of sibling elements with jQuery?
      1. UShippietrail
    3. COI'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/).
      singulars
      1. POHow to select a run of sibling elements with jQuery?
      1. UShippietrail
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload