javascript - jQuery .next()元素

mootools的这种变化使我发疯。

的HTML

<tr class="teamicon">
    <td style="text-align: center;" width="100%" valign="middle">
    //Blahblah
    </td>
  </tr>
  <tr class="teamval">
    <td valign="middle" width="100%">
    //Blahblah
    </td>
  </tr>

我想要实现的目标。当单击类“ teamicon”时，我想显示/隐藏带动画的teamval类的tr。但是，我无法使其动画正常。看起来“ teamval”内部必须先设置动画（否则我错了吗？）。

我的尝试：

jQuery(document).ready(function(){
$('.teamval').slideUp(400);
$('.teamicon').click(function(){
    if ($(this).next('tr').is(":hidden"))
    {
        $(this).next('tr.teamval').$('td').slideDown(400, function(){
            $(this).next('tr.teamval').slideDown(400);
        });
    }
    else
    {
        $(this).next('tr.teamval').$('td').slideUp(400, function(){
            $(this).next('tr.teamval').slideUp(400);
        });
    }
});
});

OFC。这是错误的("$(this).next('tr.teamval').$('td')"在萤火虫中返回错误）。我该如何实现？

我不能交换到div。

最佳答案

您可以执行以下一项操作：

$(this).next('tr.teamval').slideDown(...) // whole tr

$(this).next('tr.teamval').find('td').slideDown(...) // td descendant

该错误是因为您尝试访问jQuery元素集上的$属性，该属性不存在。相反，我们可以使用find，它搜索当前集中元素的匹配后代。

编辑：

好吧，我想你想要：

if ($(this).next('tr').is(":hidden"))
{
    var nextTeamval = $(this).next('tr.teamval');
    nextTeamval.find('td').slideDown(400, function(){
        nextTeamval.slideDown(400);
    });
}

唯一潜在的问题是，teamval是否在td（嵌套表）中包含td。您可以尝试此jsFiddle演示。