jQuery .next（）元素

Question

从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。但是，我无法使其正确动画。看起来像“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。

Answer 1

你可以这样做的一个：

$(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演示。