Question

我有一个带有深度子级别的嵌套列表项。例如：

一

a,a
a,b
    a,b,a
    a,b,b
b
    b,a
    b,b
    b,c
    b,d
        b,d,a
        b,d,b

最后一个列表是tel链接。让我们说b，d，a的tel链接是<li><a class="tel-link" href="tel:8888">b,d,a</a></li>

如何跟踪层次结构并将编号的子级别添加到tel链接的末尾，使其变为<li><a class="tel-link" href="tel:8888,2,4,1">b,d,a</a></li>并将2,4,1添加到tel链接的末尾？

这里是jsFiddle

Answer 1

使用jQuery的.index()功能（参见文档，https://api.jquery.com/index/）

如果没有向.index()方法传递参数，则返回值是一个整数，表示jQuery对象中第一个元素相对于其兄弟元素的位置。

我已经将 fiddle 放在一起进行演示。

重点是递归函数：

function getAncestory(el)
{
    if (el.parent().parent().is("li"))
        // If this <li> element is a child, prepend the parent indices
        return getAncestory(el.parent().parent()) + "," + el.index();
    else
        return el.index()
}

// Only register clicks on <li> elements that don't have children
// (there are other ways to do an equivalent selector)
$("li:not(:has(*))").click(function(event){
    alert(getAncestory($(this)))
})

这个小提琴会返回你的desired_result - 1。我之所以离开它是因为将所有值增加1是微不足道的，但是在没有增量的情况下理解代码会更简单。

将嵌套层次结构添加到tel：link的末尾

1 个答案: