javascript - <tr> 标签没有创建新行？

Question

这是我在 View 中的表

@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()