Как найти и изменить несколько классов между n & n - PullRequest
Новая
       25

Как найти и изменить несколько классов между n & n

1 голос
/ 29 марта 2010

У меня есть некоторая структура таблицы: 

    <tr class="row-2"><tr>
    <tr class="row-3">..<tr>
    <tr class="row-4">..<tr>
    <tr class="row-5">..<tr>
    <tr class="row-6">..<tr>
    <tr class="row-7"><tr>
    <tr class="row-8">..<tr>
    <tr class="row-9">..<tr>
    <tr class="row-10">..<tr>
    <tr class="row-11">..<tr>
...etc

для этого примера TR с классами "row-2" и "row-7" - это ссылка на отдельный продукт, который расширяет дочерние строки. 

<script>
$(function() {
    $('tr.parent')
        .css("cursor","pointer")
        .css("color","red")
        .attr("title","Click to expand/collapse")
        .click(function(){
            $(this).siblings('.child-'+this.id).toggle();
        });
    $('tr[@class^=child-]').hide().children('td');
});
</script>

Ряды -3 ...- 6 - это ребенок ряда-2 а также Строки -8 ...- 11 являются дочерними для строки-7

Как найти строку-2, строку-7 и т. Д., А затем добавить второй класс "родительский" и идентификатор аналогичного класса (id = "row-2", id = "row-7" и т. Д.)? Также мне нужно добавить в каждый TR между row-2 и row-7 class, равным предыдущей родительской строке. В нижней строке мне нужно что-то вроде этого: 

        <tr class="row-2 parent" id="row-2"><tr>
        <tr class="row-3 child-row2">..<tr>
        <tr class="row-4 child-row2">..<tr>
        <tr class="row-5 child-row2">..<tr>
        <tr class="row-6 child-row2">..<tr>
        <tr class="row-7 parent" id="row-7"><tr>
        <tr class="row-8 child-row7">..<tr>
        <tr class="row-9 child-row7">..<tr>
        <tr class="row-10 child-row7">..<tr>
        <tr class="row-11 child-row7">..<tr>
..etc

1 Ответ

0 голосов
/ 29 марта 2010

Один из способов - выполнить два прохода по всем строкам, чтобы установить необходимые классы и идентификаторы. На первом этапе добавьте идентификатор, идентичный имени класса, а также добавьте класс parent в row-2 и row-7. Во втором проходе найдите каждую строку .parent и добавьте класс child-<id> к их братьям и сестрам до следующего родителя. Вместо жесткого кодирования значений для строки-2 и строки-7 предполагается, что все элементы заголовка содержатся внутри элемента <th> вместо элемента <td>.

Вот код: http://jsfiddle.net/vYTW2/

/**
 * Do a two pass on all rows to set them up.
 * In the first pass, add the same id as class, and
 * add the "parent" class to the row.
 *
 * Assuming all product header rows contain a
 * <th> element
 */
$('table tr th').each(function() {
    var row = $(this).parent('tr');
    var id = row.attr('class');
    row.attr('id', id);
    row.addClass('parent');
});

/**
 * In the second pass, run through all header rows
 * (that have the class parent) and mark all next siblings
 * with class "child-rowX" until we see the next parent row.
 */
$('tr.parent').each(function() {
    var id = $(this).attr('id');
    var className = 'child-' + id;
    $(this).nextUntil('.parent').addClass(className);
});
...