“多电平”相邻的兄弟选择

我有以下的HTML（即作为生成，所以我可以只与JS改变它）：“多电平”相邻的兄弟选择

<table> 
<tr> 
    <td class="header"> 
     <h3>title 1</h3> 
    </td> 
</tr> 

<tr class="field_value"> 
    <td></td> 
</tr> 

<tr class="field_value"> 
    <td></td> 
</tr> 

<tr> 
    <td class="header"> 
     <h3>title 2</h3> 
    </td> 
</tr> 

<tr class="field_value"> 
    <td></td> 
</tr> 
....

我需要针对第一或最后的带有每个块的类“field_value”的trs。我不能使用：nth-child，因为行的nr是动态的。我不能使用：最后一个孩子和第一个孩子，因为他们不是表中的第一个或最后一个孩子。所以我唯一的机会是相邻的兄弟姐妹选择或使用JS。

我要选择每一个直接跟随包含td.header一行行：

tr td.header + tr{ 
    .. 
}

这不起作用，可能是因为将定向遵循其TR内td.header一个TR？任何想法如何解决这个问题？

编辑：

想出了一个办法做到这一点（这个具体的例子）：

tr:not(.field_value) + tr.field_value{ 
    .. 
}

- >我定位了所有行之后，不具有行field_value类。

fiddle

来源

2015-05-15 cytofu

CSS选择器无法遍历DOM向上/向后。 – Oriol

不可能使用CSS，因为没有父级或上一级兄弟选择器。 JavaScript将是必需的。 –

有时你可以通过从不同的角度看待事物来使不可能变为可能;） – cytofu

我居然想出了一个办法张贴的问题要做到这一点：

我可以针对每一个tr跟随一个没有类的字段“field_value”

tr:not(.vf__field_value) + tr.vf__field_value{ 
    .. 
}

这是它的一个小提琴（propably使它更加清楚一点什么我期待的）：

http://jsfiddle.net/b78unpms/1/

仍然会感兴趣的其他解决方案..

来源

2015-05-15 16:28:19 cytofu

它很难理解你的要求，我想你问到选择具有类.field_value表中最后一个tr元素如果是这样，这将工作：

EDITED: I didnt realize it cant do classes //tr.field_value:last-of-type

在CSS中选择包含标题的行的下一个孩子是不可能的，您将不得不使用javascript标记.header的父级，然后选择该标签。使用jQuery：

$('td.header').parent().addClass('.parent-of-header') 
.next().addClass('.first-field-value');

要标记头前的最后一个，你可以使用jQuery做到这一点：

$('td.header').parent().addClass('.parent-of-header') 
.prev().addClass('.first-field-value');

来源

2015-05-15 16:23:40 Rolyataylor2

我认为它也将只选择最后一行。因此与上一个孩子相同的问题 – cytofu

CSS选择器仍然只会选择最后一个'tr'，前提是它也具有'field_value'类。它不会选择那些拥有该类的最后一个'tr'。 – Harry

是的哎呀，我认为它可以做类。我认为最好的解决方案是预先标记tr或使用javascript来查找 – Rolyataylor2

“多电平”相邻的兄弟选择

回答

相关问题