字符串数组中的 jQuery 选择器

Question

这里有一个类似的答案，但它有些不同并且不适合我的情况，我不能只执行 join(): an array of strings as a jQuery selector?

我有一个如下所示的动态数组，

['abc', 'def', 'ghi']

我需要执行如下所示的选择器字符串，包括所有这些值作为 data-event 属性，如下所示:

$('li.event[data-event="' + /*every element from the array*/ + '"]');

有没有办法避免循环？

Answer 1

Every element of the array data-event needs to be included in the Selector string shown. That is my selector. e.g.: .event[data-event="abc"], .event[data-event="def"], .event[data-event="ghi"].

在这种情况下，您需要为每个元素构建一个单独的选择器，并将它们join()在一起。您可以使用 map() 来实现:

var arr = ['abc', 'def', 'ghi'];
var selector = arr.map(function(el) {
  return `.event[data-event="${el}"]`;
}).join(',');

$(selector).addClass('foo');

.foo { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event" data-event="abc">ABC</div>
<div class="event" data-event="def">DEF</div>
<div class="event" data-event="ghi">GHI</div>
<div class="event" data-event="xyz">XYZ</div>