在其td具有特定类的行之前添加新行

Question

我正在研究以下代码。 为什么我不能添加新行.green的任何前tr具有td与类.red

如您所见，以下代码在tr内添加了新的tr：

 $( '<tr class="green"><td>new row<td></tr>' ).insertBefore( " tr > td.red" ); 

 .red{ background:red; } .green{ background:green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>test</td> <td>test2</td> </tr> <tr> <td class="red">test</td> <td>test2</td> </tr> </table> 

Answer 1

您需要在插入td.red tr之前使用:has() 。

.insertBefore( " tr:has(td.red)" );

看一下这个：

 $( '<tr class="green"><td>new row<td></tr>' ).insertBefore( " tr:has(td.red)" ); 

 .red{ background:red; } .green{ background:green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>test</td> <td>test2</td> </tr> <tr> <td class="red">test</td> <td>test2</td> </tr> </table> 

Answer 2

1. 将.parent()与.before()

 $( " tr > td.red" ).parent( ).before( '<tr class="green"><td>new row<td></tr>'); 

 .red{ background:red; } .green{ background:green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>test</td> <td>test2</td> </tr> <tr> <td class="red">test</td> <td>test2</td> </tr> </table> 

Answer 3

您的选择器用于td ，而不用于tr 。

您需要使用:has选择器来检查tr包含带有红色类的td

$( '<tr class="green"><td>new row<td></tr>' ).insertBefore( " tr:has(td.red)" );

演示版

 $( '<tr class="green"><td>new row<td></tr>' ).insertBefore( " tr:has(td.red)" ); 

 .red{ background:red; } .green{ background:green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>test</td> <td>test2</td> </tr> <tr> <td class="red">test</td> <td>test2</td> </tr> </table>