「多電平」相鄰的兄弟選擇

我有以下的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

「多電平」相鄰的兄弟選擇

回答

相關問題