用于导航列表的递归 JQuery 函数

发布于 2024-10-14 20:31:50 字数 809 浏览 3 评论 0原文

我正在寻找遍历使用 ul 元素创建的树。我意识到使用适当的选择器可以更轻松地完成此操作，但我想创建一个递归函数来执行此操作。

这个想法是向下移动树并打开所有子列表，同时将类“on”添加到 li:first-child 元素以打开列表并突出显示每个列表中的第一个项目。这是我的做法：

function showAllFirstDiv(topnav) {
    $(topnav).show();
    $(topnav + ' > li:first').addClass('on');
    if ($(topnav + ' > li:first > ul:first').length)
    {
        var childUL = $(topnav + ' > li:first > ul:first');
        showAllFirstDiv(childUL);
    }   
    else
    return true;
}

我正在调用：

showAllFirstDiv('.top');

它打开 .top ul 和第一个子 ul ( .top > li > ul ) 以及打开 .top > ul 。 li:first-child on 但停在那里，给我 jQuery 错误“未捕获的语法错误，无法识别的表达式：[object Object]”

我假设我混淆了 jQuery 和 JavaScript 元素，但似乎无法准确弄清楚问题是什么。

我是 JavaScript/jQuery 新手，非常感谢任何帮助或其他基本指示。谢谢。

原文

I'm looking to traverse a tree I've created using ul elements. I realize this can be done more easily using the appropriate selector, but I'd like to create a recursive function to do this.

The idea is to move down the tree and turn on all the sub lists while adding the class 'on' to li:first-child elements to turn the list on and highlight first items in each list. Here's how I'm going about it:

function showAllFirstDiv(topnav) {
    $(topnav).show();
    $(topnav + ' > li:first').addClass('on');
    if ($(topnav + ' > li:first > ul:first').length)
    {
        var childUL = $(topnav + ' > li:first > ul:first');
        showAllFirstDiv(childUL);
    }   
    else
    return true;
}

and I'm calling:

showAllFirstDiv('.top');

It turns on the .top ul and the first child ul ( .top > li > ul ) as well as turning .top > li:first-child on but stops there giving me the jQuery error 'Uncaught Syntax error, unrecognized expression: [object Object]'

I'm assuming I'm mixing up jQuery and JavaScript elements, but can't seem to figure out exactly what the problem is.

I'm new to JavaScript/jQuery and any help or other basic pointers are appreciated. Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

狂之美人 2024-10-21 20:31:50

函数 showAllFirstDiv() 需要一个字符串，然后将其用作 jQuery 对象的选择器...

您传递给该函数的 childUL 变量实际上是一个 jQuery object...

要解决该问题，请执行以下操作：

function showAllFirstDiv(topnav) {
    $(topnav).show();
    $(topnav + ' > li:first').addClass('on');
    if ($(topnav + ' > li:first > ul:first').length)
    {
        var childUL = topnav + ' > li:first > ul:first';
        showAllFirstDiv(childUL);
    }   
    else
    return true;
}

注意，childUL 现在是一个字符串（成为选择器）而不是 DOM 元素对象。

希望有帮助:)

The function showAllFirstDiv() requires a string which is then used as a selector for the jQuery object...

The childUL variable that you are handing to the function is actually a jQuery object...

To solve the problem, do the following:

function showAllFirstDiv(topnav) {
    $(topnav).show();
    $(topnav + ' > li:first').addClass('on');
    if ($(topnav + ' > li:first > ul:first').length)
    {
        var childUL = topnav + ' > li:first > ul:first';
        showAllFirstDiv(childUL);
    }   
    else
    return true;
}

Note, childUL is now a string (that becomes the selector) instead of the DOM element object.

Hope that helps :)

回复收藏 0 原文

~没有更多了~