StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>My updated answer is inspired by <a href="https://stackoverflow.com/questions/3768209/jquery-if-statement-detecting-if-there-are-tr-with-x-class-below/3768250#3768250">Sarfraz's original answer</a>, but he went a different way in the end, so posting here instead:</p> <pre><code>$('tr.x:has(+ tr.y)').css({ ... }); </code></pre> <p>That uses a <a href="http://www.w3.org/TR/css3-selectors/#sibling-combinators" rel="nofollow noreferrer">sibling combinator</a> with a <code>:has</code> test. (I'm not sure whether <code>:has</code> is a <a href="http://sizzlejs.com/" rel="nofollow noreferrer">Sizzle</a>-specific thing [Sizzle being the selector engine used by jQuery and others] or of there's a proposal out there; it's not specified by CSS3, and so not standard...yet?)</p> <p>Live example: <a href="http://jsbin.com/imeso4/3" rel="nofollow noreferrer">http://jsbin.com/imeso4/3</a></p> <p><strong>Update</strong> If you want to apply styling to the first <em>child cell</em> of that row, you're looking for the <a href="http://www.w3.org/TR/css3-selectors/#first-child-pseudo" rel="nofollow noreferrer"><code>:first-child</code></a> selector:</p> <pre><code>$('tr.x:has(+ tr.y) td:first-child').css({ ... }); </code></pre> <p>Live example: <a href="http://jsbin.com/imeso4/8" rel="nofollow noreferrer">http://jsbin.com/imeso4/8</a></p> <p>Or if you want to do something with the rows, and then also do something with the cells, break it up:</p> <pre><code>var rows = $('tr.x:has(+ tr.y)'); rows.css({color: 'blue'}); rows.find('td:first-child').css({color: 'red'}); </code></pre> <p>Live example: <a href="http://jsbin.com/imeso4/7" rel="nofollow noreferrer">http://jsbin.com/imeso4/7</a></p> <hr> <p><s>Original (plodding) answer:</p> <pre><code>$(document).ready(function() { $('tr.x').each(function() { var $this = $(this); var next = $this.next('tr'); if (next.length > 0 && next.hasClass('y')) { // This tr is class x followed by class y } }); }); </code></pre> <p>Live example: <a href="http://jsbin.com/imeso4" rel="nofollow noreferrer">http://jsbin.com/imeso4</a></s></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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