Эффективно обходить верхних и нижних братьев и сестер

Question

Попытка создать эффект плагина, который будет выглядеть лучше, когда он будет готов.

Обратите внимание на цифры 0, 1, 2.

Они просто указывают уровень, на котором находится элемент в настоящее время. 0 обозначает верхний уровень, а 2 - наименьший. Проверьте демо здесь .

Каждый раз, когда я нажимаю на столбец, он становится главными столбцами (таким образом, получая 0 в качестве своего уровня) , а остальные столбцы выравниваются с использованием того же правила. Если вы видите фрагмент, который я использую для этого, он очень уродливый.

$("li").click(function() {
    $(this).html(0);

    //denote the first level
    $(this).next().html(1);
    $(this).prev().html(1);

    //denote the second level
    $(this).next().next().html(2);
    $(this).prev().prev().html(2);    

    //denote the third level
    $(this).next().next().next().html(3);
    $(this).prev().prev().prev().html(3);    

    //denote the fourth level
    $(this).next().next().next().next().html(4);
    $(this).prev().prev().prev().prev().html(4);    
});

Я абсолютно ненавижу это. Что, если число моей колонки возрастет, у меня тогда проблемы. Мне нужно что-то аккуратное, чтобы пройти по древовидной структуре (например, .closest("li")) и ниже. Для каждого столбца указывается определенный уровень разметки после изменения основного столбца.

Answer 1

Вы можете использовать prevAll ^{[документы]} и nextAll ^{[документы]} :

$(this).prevAll().each(function(i) {
    $(this).text(i+1);
});

$(this).nextAll().each(function(i) {
    $(this).text(i+1);
});

DEMO

Кстати.Вы не перемещаетесь вверх или вниз по дереву, вы всегда остаетесь на одном уровне.