Question

在我正在进行的项目中，我一直在编写一个JavaScript对象。其中一个行为涉及删除一系列课程中的任何孩子，如下：

function Foo () {
    var $a = $('.a'),
        $b = $('.b'),
        // ...etc...
        $n = $('.n');

    $a.remove();
    $b.remove();
    // ...etc again...
    $n.remove();
}

虽然有一些方法可以修改它以便更容易维护（将选择器放入单个数组弹簧中立刻想到），我想知道是否有任何优雅的方法来执行.remove()操作一系列选择器，如：

function FooPrime() {
    var selectors = [
        '.a',
        '.b',
        // ...
        '.n'
    ];

    // Perform remove on all given selectors?
    $(selectors).remove();
}

因此，问题：我可以通过多种方式对多个选择器执行单个jQuery操作？

编辑：here是一个JSFiddle，用于显示问题上下文的简化版本。

Answer 1

您可以用逗号分隔选择器：

 $(selectors.join(',')).remove();

逗号在直接普通的CSS选择器语法中具有该目的。

Answer 2

感谢您展示您的DOM，您应该避免在可以向元素添加多个类并为要定位的元素创建特定类时选择要列出的大类列表，或者通过与其他元素的关联来定位。这将是一种更干净，更有效的方法。

通过关联

基本上对于选择器我只有这个：

$("#test-callout").find("div").not(".callout-main").remove();

Fiddle

这假设您除.callout-main以外的任何其他div和test-callout中的目标div。如果这样做，您可以稍微修改选择器链以进行补偿。

添加另一个类

您的箭头创建代码如下：

function calculateArrow() {
    var arrowClass;
    if(pub.isLeft) {
        arrowClass = 'callout-arrow-left';   
    } else {
        arrowClass = 'callout-arrow-right';
    }

    pub.$callout.append('<div class="' + arrowClass + '"></div>');
}

将其修改为：

function calculateArrow() {
    $arrow = $("<div>")
    .addClass("callout-arrow")
    .addClass(pub.isLeft ? "callout-arrow-left" : "callout-arrow-right");        
    pub.$callout.append($arrow);
}

然后您的选择器可以简单地：

$("#test-callout").find(".callout-arrow").remove();

Fiddle

如果您对完整的重构感兴趣 - 我将CalloutObject从53行减少到17行，它仍然可以正常工作。

Fiddle

优雅地在多个选择器上执行相同的操作？

2 个答案: