jQuery中的多个选择器链接？

Question

通常，当我使用类作为选择器时，我会尝试使用“id”选择器，因此它不会搜索整个页面，而只会搜索该类所在的区域。

但是我有一个部分视图，其中包含代码。这个局部视图（通用代码）被一个表单标签包裹起来。

我有：

<form id="Create">
// load common code in from partial view
</form>

<form id="Edit">
// load common code in from partial view
</form>

现在在这个通用代码中，我需要将一个插件附加到多个字段，所以我会这样做

$('#Create .myClass').plugin({ options here});

$('#Edit .myClass').plugin({options here});

所以它几乎是相同的代码。我想知道是否有办法让它查找任何一个 id？

编辑

当我的选择器有变量时，我遇到了问题

    my.selectors = 
    {
        A: '#Create',
        B: '#Edit',
        Plugin: ' .Plugin' 
    };

 $(selector.A+ selectors.Plugin, selector.B+ selectors.Plugin)

似乎没有运行。

Answer 1

您可以用逗号组合多个选择器：

$('#Create .myClass,#Edit .myClass').plugin({options here});

或者，如果您要拥有一堆，您可以为所有表单元素添加一个类，然后在该类中搜索。这不会为您带来限制搜索的所谓速度节省，但老实说，如果我是您，我不会太担心这一点。浏览器做了很多花哨的事情来优化你背后的常见操作——简单的类选择器可能会更快。

Answer 2

$("#Create").find(".myClass").add("#Edit .myClass").plugin({});

使用$.fn.add 连接两个集合。

Answer 3

你应该可以使用：

$('#Edit.myClass, #Create.myClass').plugin({options here});

jQuery | Multiple Selectors

Answer 4

我认为通过这种方式，您可能会看到性能稍好一些：

$("#Create, #Edit").find(".myClass").plugin(){
    // Options
});

Answer 5

喜欢：

$('#Create .myClass, #Edit .myClass').plugin({ 
    options: here
});

您可以指定任意数量的 选择器组合成一个 结果。这个多重表达 组合器是一种有效的方法 选择不同的元素。命令 返回的 DOM 元素 jQuery 对象可能不相同，如 它们将按文件顺序排列。一个 该组合器的替代方案是 .add() 方法。

• Multiple Selector
• Add method

Answer 6

这里已经有了很好的答案，但在其他一些情况下（不是特别是这个），使用 map 可能是“唯一”的解决方案。

特别是当我们想要使用正则表达式时，而不是标准的。

对于这种情况，它看起来像这样：

 $('.myClass').filter(function(index, elem) {
    var jElem = $(elem);

    return jElem.closest('#Create').length > 0 || 
           jElem.closest('#Edit').length > 0;

}).plugin(...);

正如我之前所说，这个解决方案在这里可能没用，但对于进一步的问题，是一个非常好的选择

Answer 7

如果我们想将相同的功能和特性应用于多个选择器，那么我们会使用多个选择器选项。 我想我们可以说这个特性就像可重用性一样使用。编写一个 jquery 函数，然后添加多个我们想要相同功能的选择器。

请看下面的例子：

$( "div, span, .paragraph, #paraId" ).css( {"font-family": "tahoma", "background": "red"} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Div element</div>
<p class="paragraph">Paragraph with class selector</p>
<p id="paraId">Paragraph with id selector</p>
<span>Span element</span>

希望对你有所帮助。 合十