Question

On most my pages I have a specific div that holds the title for that page:

<div id="pagetitle">Some Title</div>

And usually immediately after is a table.
I want to select all tables, but only tables after the #pagetitle div.

I intend to add some css to just those tables. Currently I am having to create a class and add that class to all the tables. But I have tons of pages.

Current code:

$('table.valigntop tr td').css('vertical-align','middle');

I need a little help with creating a cool jquery select statement that selects all tables that exist after the #pagetitle element. Whether it’s the best way for my sites is still to be determined.

Answer 1

Alternatively, you can also use nextAll() Here’s an example http://jsfiddle.net/Q8Af6/

HTML:

<table><tr><td>table one</td></tr></table>
<table><tr><td>table two</td></tr></table>
<div id='pagetitle'></div>
<table><tr><td>table three</td></tr></table>
<table><tr><td>table four</td></tr></table>
<table><tr><td>table five</td></tr></table>

CSS:

div, table{
    display:block;
}

JS:

$('#pagetitle').nextAll('table').css("background", "yellow");

EDIT JS: Add the td selector http://jsfiddle.net/Q8Af6/1/

$('#pagetitle').nextAll('table').find('td').css("background", "yellow");