Переключить переменное число строк таблицы

У меня есть таблица, в которой нажатие ссылки должно показывать "под", которые принадлежат к данным в нажатой строке.

Так как число подков может варьироваться от 0 до n, я думаю, что я должен вычислить количество подходов методом .val, верно ли это? Таким образом, значением должно быть количество невидимых строк с именем класса 'affiliated' до следующего tr без имени класса. Как я могу это сделать? Я сделал некоторые попытки, но я довольно новичок в jQuery.

Я подумал что-то вроде этого, чтобы вычислить количество tr.affiliated:

 var affiliatednumber = $(this).find("tr.affiliated").val().stop();

DEMO

Ответ 1

http://jsfiddle.net/6t6QT/2/

Использование .val и .stop не имеет смысла, и вы не используете ввод, а a. Я использовал .nextUntil, поскольку строки будут сгруппированы вместе; просто найдите ближайшую родительскую строку a (это "ведущая" строка) и используйте .nextUntil, чтобы найти ее дочерние строки - рядом с другой основной строкой. Это также помогло бы, если бы мастер-строки имели свой собственный класс.

Ответ 2

Если вы поместите класс для каждого родителя tr, вы можете использовать nextUntil() следующим образом:

<tbody>
    <tr class="parent">
        <td>John</td>
        <td>HR Admin</td>
        <td>10/10/1980</td>
        <td>Yes</td>
        <td><a class="showaffiliated" href="#">Yes</a></td>
    </tr>
    <tr class="affiliated">
        <td colspan="2">Amanda</td>
        <td colspan="3">20/20/1985</td>
    </tr>
    <tr class="affiliated">
        <td colspan="2">Louis</td>
        <td colspan="3">20/10/2010</td>
    </tr>
</tbody>

$("tr.affiliated").hide();

$("a.showaffiliated").click(function() {
    var $affiliated = $(this).closest(".parent").nextUntil(".parent");
    $affiliated.toggle();
    var affiliatednumber = $affiliated.length;
});

Пример скрипта