jQuery .next() éléments

Question

Ce changement de mootools me rend fou.

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> 

Ce que je veux atteindre. Quand on clique sur "teamicon", je veux afficher/masquer tr avec la classe teamval avec animation. Cependant, je ne peux pas le faire animer correctement. On dirait que "teamval" doit être animé en premier (ou ai-je tort?).

Mon essai:

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. Ceci est faux ("$(this).next('tr.teamval').$('td')" renvoie une erreur dans firebug). Comment puis-je atteindre cet objectif?

Je ne peux pas échanger à div cependant.

Answer 1

Vous pouvez faire un des:

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

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

L'erreur est parce que vous essayez d'accéder à une propriété $ sur l'ensemble des éléments jQuery, qui n'existe pas. Au lieu de cela, nous pouvons utiliser find, qui recherche les descendants correspondants des éléments de l'ensemble en cours.

EDIT:

D'accord, je pense que vous voulez:

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

Le seul problème potentiel est si teamval contient un td dans un td (tableau imbriqué). Vous pouvez essayer cette démo jsFiddle.