4

在我正在进行的项目中，我一直在编写一个小的 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 操作？

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

4

2 回答 2

6

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

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

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

于 2013-08-16T19:52:00.143 回答
1

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

按关联

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

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

小提琴

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

通过添加另一个类

你的箭头创建代码是这样的：

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();

小提琴

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

小提琴

于 2013-08-16T21:20:13.753 回答