1

我一直错过 jQuery 中的一个遍历函数，我想可能有一个但我错过了。假设我们有以下标记：

<ul>
    <li><a href="#">Foo</a></li>
    <li><a href="#">Bar</a></li>
    <li><a href="#">John</a></li>
    <li><a href="#">Doe</a></li>
</ul>

现在，如果我想向我单击的锚点添加一个活动类并停用其他类，我通常必须这样做：

$('a').click(function() {
    $(this).addClass('active')
        .parent()
        .siblings()
        .find('a.active')
        .removeClass('active');
});

但我想做的是：

var relation = function() {
    return $(this).parent().siblings().find('a.active');
};

$('a').click(function() {
    $(this).addClass('active').find(relation).removeClass('active');
});

看到不同？现在，find不把函数作为参数，所以我写了这样的东西：

$.fn.traverse = function(fn) {
    return $.isFunction(fn) ? fn.call(this) : this;
};

例如，这个简单的方法可以创建一个“激活”插件，让作者指定与停用的关系：

$.fn.activate = function(fn) {
    return this.each(function() {
        $(this).addClass('active').traverse(fn || function() {
            return $(this).siblings();
        }).removeClass('active');
    });
});

并像这样使用它：

$('a').activate(function() {
    return $(this).parent().siblings().find('.active');
});

// or

$('a').activate(function() {
    return $(this).closest('ul').find('a.active').not(this);
});

// or

$('li').activate();

这将完成这项工作。但我的问题是，jQuery 中确实应该包含类似的东西，不是吗？我正在看，.map但它不起作用。

4

1 回答 1

1

jQuery 中通常的模式是：

  • 找到要更改的元素，然后

  • 调用一个方法对他们做某事。

您可以通过许多其他方式来做事，但这种方式工作得很好，这也是图书馆设计的工作方式。我需要一个令人信服的理由才能摆脱这一点。（不仅仅是“但我想这样做。”）

我会这样写：

$('a').click(function() {
    $(this).closest('ul').find('a.active').removeClass('active');
    $(this).addClass('active');
});

链接被高估了。如果你想做两件事，试着写两行代码。你可能会喜欢它！

于 2012-09-27T14:55:22.903 回答