jquery выберите Table, но только после Div

Question

На большинстве моих страниц у меня есть определенный div, который содержит заголовок для этой страницы:

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

И обычно сразу после таблицы. Я хочу выбрать все таблицы, но только таблицы после #pagetitle div.

Я собираюсь добавить немного CSS только к этим таблицам. В настоящее время мне нужно создать класс и добавить этот класс во все таблицы. Но у меня есть тонны страниц.

Текущий код:

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

Мне нужна небольшая помощь в создании классного оператора выбора jquery, который выбирает все таблицы, которые существуют после элемента #pagetitle. Будет ли это лучшим способом для моих сайтов, еще предстоит определить.

Answer 1

Кроме того, вы также можете использовать nextAll() Вот пример 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");

РЕДАКТИРОВАТЬ JS: Добавить селектор td http://jsfiddle.net/Q8Af6/1/

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

Answer 2

Выберите таблицы следующим образом:

$("#pagetitle ~ table")

Answer 3

Когда вы говорите «сразу после», это звучит так, как будто вы имеете в виду, что «1001 * находится на том же уровне DOM, что и div - другими словами, это брат div». Это верно?

Если это так, вы можете использовать jQuery Next Siblings Selector . Примерно так:

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

Или посмотрите примеры на http://api.jquery.com/next-siblings-selector/,, которые также должны дать вам то, что вы хотите.

Редактировать

Чем больше я смотрю на первую версию, которую я разместил, я понимаю, что она действительно ищет td, который является братом #pagetitle, , а не table, который является братом из #pagetitle.

Это означает, что правильный путь для достижения этой цели - сначала выбрать таблицы с помощью оператора-брата, , а затем найти дочерние элементы этих таблиц, что-то вроде этого (http://jsfiddle.net/T3nuQ/6/):

$("#pagetitle ~ table").find('tr td').css('vertical-align','middle');

Answer 4

Наиболее эффективным решением было бы поместить эти таблицы внутрь контейнера, а затем вы можете просто изменить таблицы внутри этого контейнера..