Question

这是我在视图中的表格

@for (int i = 0; i < Model.AllCommonMatches.Length; i++)
{
    <tr class="category">
        <td>//somestuff</td>          
        <td>//some stuff</td>
        <td>//some stuff</td>
    </tr>
    <tr class="subcategory" style="display:none">
        @foreach (var person in Model.AllCommonMatches[i].AvailableAttendees)
        {

            <td>@person.Email &nbsp; &nbsp; @person.FirstName &nbsp;&nbsp;@person.LastName</td>    

        }
    </tr>
}

表行的点击事件

<script>
    $(document).ready(function () {
        $('.category').on('click', function () {
            $(this).next('.subcategory').fadeToggle();
        });
    });
</script>

每当点击表格行时，它会展开并显示一些数据

以下是生成的Html

 <tr class="subcategory" style="">
    <td>biplov.cybercop@hotmail.com &nbsp; &nbsp;  &nbsp;&nbsp;</td>
    <td>yo@yo.com &nbsp; &nbsp;  &nbsp;&nbsp;</td>
    <td>foo@foo.com &nbsp; &nbsp;  &nbsp;&nbsp;</td>
 </tr>

正如您所看到的，日期下面有三个电子邮件地址。我希望每封电子邮件都显示为单独的行。因此，当点击包含日期的行时，每封电子邮件占据整行。

这就是我尝试过的（将<tr>标记放在foreach语句中）

foreach (var person in somecase)
{
    <tr>
    <td>@person.Email &nbsp; &nbsp; @person.FirstName &nbsp;&nbsp;@person.LastName</td>    
    </tr>
}

但现在当点击带日期的行时，它只显示一行。当我点击该行时，现在什么也没发生。新行似乎不显示电子邮件

Answer 1

.next并选择下一个DOM元素。我想你真的想要nextUntil：

$(this).nextUntil('.category').fadeToggle();

.nextUntil()

Answer 2

正如jQuery documentation中所述，next()会立即得到兄弟姐妹。

仅指一个，而不是三个。

标签是不是在创建新行？

2 个答案: