jQuery traversant question

Question

Pour ce code HTML:

<table> 
    <tr><td>Visible</td></tr> 
    <tr><td>Visible</td></tr> 
    <tr><td>Visible</td></tr> 
    <!-- etc... --> 
    <tr style="display:none"><td>Hidden</td></tr> 
    <tr style="display:none"><td>Hidden</td></tr> 
    <tr style="display:none"><td>Hidden</td></tr> 
    <!-- etc... --> 
    <tr><td><a class="show-5-more">Show 5 More</a></td></tr> 
</table> 

Voici le code jQuery j'ai jusqu'à présent:

//show 5 more table rows (that were previously hidden) 
$('a.show-5-more').click(function() { 
    alert('clicked!'); 
    return false; 
}); 

Comment puis-je faire:

• Sélectionnez la première ligne de la table cachée, puis slideDown() la ligne de la table
• sélectionnez la variable t un, faites-le glisser vers le bas
• sélectionner la suivante, etc ...
• Je veux le faire pour 5 lignes de table cachées

Answer 1

Cela dévaler les cinq premières lignes cachées dans la même table dans lequel le lien est cliqué:

$('a.show-5-more').click(function() { 
    $(this).closest("table").find("tr:hidden:lt(5)").slideDown(); 
    return false; 
}); 

Si vous voulez les faire glisser vers le bas l'un après l'autre, vous avez deux options. Probablement est le plus facile à utiliser les délais d'attente à la chaîne efficacement les ensemble:

$('a.show-5-more').click(function() { 
    $(this).closest("table").find("tr:hidden:lt(5)").stop().each(function(i, val) { 
    slide_down(this, i, 600); 
    }); 
    return false; 
}); 

function slide_down(el, i, delay) { 
    setTimeout(function() { 
    $(el).slideDown(delay); 
    }, i * delay); 
} 

Sinon, vous pouvez essayer enchaînant les callbacks sur slideDown() ensemble.

Ce que je vous conseille dans ce scénario est cependant d'utiliser <tbody> pour rendre ce beaucoup plus facile à mettre en œuvre:

<table> 
<tbody> 
    <tr><td>Visible</td></tr> 
    <tr><td>Visible</td></tr> 
    <tr><td>Visible</td></tr> 
    ... 
</tbody> 
<tbody style="display: none;"> 
    <tr><td>Hidden</td></tr> 
    <tr><td>Hidden</td></tr> 
    <tr><td>Hidden</td></tr> 
    ... 
</tbody> 
<tbody style="display: none;"> 
    <tr><td>Hidden</td></tr> 
    <tr><td>Hidden</td></tr> 
    <tr><td>Hidden</td></tr> 
    ... 
</tbody> 
<tr><td><a class="show-5-more">Show 5 More</a></td></tr> 
</table> 

puis:

$('a.show-5-more').click(function() { 
    $(this).closest("table").find("tbody:hidden:first").slideDown("slow"); 
    return false; 
}); 

C'est beaucoup plus simple de regroupement des rangées pour ce genre de chose.

Answer 2

Pour afficher 5 une fois que vous pouvez utiliser

$(function() { 
    $('.show-5-more').click(function() { 
    $(this).closest('table').data('row', 0); 
    slideDownNext.call(this); 
    }); 
}); 

function slideDownNext() { 
    var $table = $(this).closest('table'); 
    if($table.data('row') < 5) { 
    $table.data('row', $table.data('row') + 1); 
    $table.find('tr:hidden:first').slideDown('', slideDownNext); 
    } 
}