jQuery 中的多重选择器链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5736811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple selector chaining in jQuery?
提问by chobo2
Normally when I use a class as a selector I try to use an "id" selector with it so it does not search through the entire page but only an area where the class would be.
通常，当我使用一个类作为选择器时，我会尝试使用一个“id”选择器，这样它就不会搜索整个页面，而只会搜索该类所在的区域。
However I have a partial view with code in it. This partial view (common code) gets wrapped around a form tag.
但是我有一个包含代码的部分视图。这个局部视图（公共代码）被包裹在一个表单标签中。
I have:
我有：
<form id="Create">
// load common code in from partial view
</form>
<form id="Edit">
// load common code in from partial view
</form>
Now in this common code I need to attach a plugin to multiple fields so I would do
现在在这个通用代码中，我需要将一个插件附加到多个字段，所以我会这样做
$('#Create .myClass').plugin({ options here});
$('#Edit .myClass').plugin({options here});
So it's pretty much the same code. I am wondering if there is a way to make it look for either of the id's?
所以它几乎是相同的代码。我想知道是否有办法让它寻找任何一个 id？
Edit
编辑
I am having problems with it when I have variables for my selectors
当我的选择器有变量时，我遇到了问题
my.selectors =
{
A: '#Create',
B: '#Edit',
Plugin: ' .Plugin'
};
$(selector.A+ selectors.Plugin, selector.B+ selectors.Plugin)
Does not seem to run.
好像没跑。
回答by Leopd
You can combine multiple selectors with a comma:
您可以使用逗号组合多个选择器：
$('#Create .myClass,#Edit .myClass').plugin({options here});
Or if you're going to have a bunch of them, you could add a class to all your form elements and then search within that class. This doesn't get you the supposed speed savings of restricting the search, but I honestly wouldn't worry too much about that if I were you. Browsers do a lot of fancy things to optimize common operations behind your back -- the simple class selector might be faster.
或者，如果您要拥有一堆，您可以向所有表单元素添加一个类，然后在该类中进行搜索。这不会让您获得限制搜索的所谓速度节省，但老实说，如果我是您，我不会太担心。浏览器做了很多花哨的事情来优化你背后的常见操作——简单的类选择器可能会更快。
回答by Raynos
回答by Rion Williams
You should be able to use:
您应该能够使用：
$('#Edit.myClass, #Create.myClass').plugin({options here});
回答by Kevin Ennis
I think you might see slightly better performance by doing it this way:
我认为通过这种方式你可能会看到更好的性能：
$("#Create, #Edit").find(".myClass").plugin(){
// Options
});
回答by Caspar Kleijne
like:
喜欢：
$('#Create .myClass, #Edit .myClass').plugin({
options: here
});
You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order. An alternative to this combinator is the .add() method.
您可以指定任意数量的选择器以组合成单个结果。这种多表达式组合器是选择不同元素的有效方法。返回的 jQuery 对象中 DOM 元素的顺序可能不同，因为它们将按文档顺序排列。此组合器的替代方法是 .add() 方法。
回答by dani24
There are already very good answers here, but in some other cases (not this in particular) using map could be the "only" solution.
这里已经有很好的答案，但在其他一些情况下（尤其不是这个）使用 map 可能是“唯一”的解决方案。
Specially when we want to use regexps, other than the standard ones.
特别是当我们想使用正则表达式时，而不是标准的。
For this case it would look like this:
对于这种情况，它看起来像这样：
$('.myClass').filter(function(index, elem) {
var jElem = $(elem);
return jElem.closest('#Create').length > 0 ||
jElem.closest('#Edit').length > 0;
}).plugin(...);
As I said before, here this solution could be useless, but for further problems, is a very good option
正如我之前所说，这里这个解决方案可能没用，但对于进一步的问题，是一个非常好的选择
回答by Ankur prajapati
If we want to apply the same functionality and features to more than one selectors then we use multiple selector options. I think we can say this feature is used like reusability. write a jquery function and just add multiple selectors in which we want the same features.
如果我们想将相同的功能和特性应用于多个选择器，那么我们使用多个选择器选项。我想我们可以说这个特性就像可重用性一样使用。编写一个 jquery 函数，然后添加多个我们想要相同功能的选择器。
Kindly take a look in below example:
请看下面的例子：
$( "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>I hope it will help you. Namaste
我希望它会帮助你。合十礼
