Question

请您查看此代码，并告诉我为什么我无法在任何.green tr之前添加新行td .red {1}}

正如您可以看到以下代码在tr

中添加新tr

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您需要在具有RSpec Mocks的{{1}}之前插入:has()。

tr

检查一下：

td.red

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

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

Answer 2

将.parent()与.before()

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

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

3 个答案: