Question

在我的大部分页面上，我都有一个特定的div，其中包含该页面的标题：

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

通常紧接着是一张桌子。我想选择所有表，但只选择#pagetitle div之后的表。

我打算在这些表中添加一些css。目前我不得不创建一个类并将该类添加到所有表中。但我有很多页面。

当前代码：

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

我需要一点帮助来创建一个很酷的jquery select语句，它选择#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

最有效的修复方法是将这些表实际放入容器中，然后只需修改该容器内的表即可。

一个没有css的简单div（复位样式除外）就可以了。

Answer 4

当你说“紧接着”后，听起来你的意思是“table与div处于相同的DOM级别” - 换句话说，它是{{1}的兄弟姐妹}“。是吗？

如果是这样，您可以使用jQuery Next Siblings Selector。像这样：

<击> div

或者查看http://api.jquery.com/next-siblings-selector/上的示例，它们也可以为您提供所需的内容。

修改

我看到我发布的第一个版本越多，我就会发现它真的在寻找$('#pagetitle ~ table.valigntop tr td').css('vertical-align','middle');，它是td的兄弟，不是 #pagetitle 1}}这是table的兄弟姐妹。

这意味着实现此目的的正确方法是首先使用兄弟运算符选择表，然后找到这些表的子项，更像是这样（http://jsfiddle.net/T3nuQ/6/）：

#pagetitle

jquery选择表，但只在Div之后

4 个答案:

修改