穿越Upper＆amp;有效降低兄弟姐妹

Question

  

尝试构建一个插件效果，当它准备就绪时会看起来比这更好看。

请注意数字0，1，2。

它们是元素当前所处级别的简单指示。0表示顶级，2表示最低级别。查看演示here。

每次点击一列时，它都会成为主列（因此获得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 ^[docs]和nextAll ^[docs]：

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

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

DEMO

顺便说一下。你不是在树上上下移动，而是一直都在同一层。