一个字符串数组作为 jQuery 选择器？答案

【问题标题】：an array of strings as a jQuery selector?一个字符串数组作为 jQuery 选择器？
【发布时间】：2023-03-19 21:38:01
【问题描述】：

我有一个字符串数组，它们是有效的 jQuery 选择器（即页面上元素的 ID）：

["#p1", "#p2", "#p3", "#p4", "#p5"]

我想将具有这些 ID 的元素选择到一个 jQuery 数组中。这可能是基本的，但我在网上找不到任何东西。我可以有一个 for 循环，它创建一个字符串 "#p1,#p2,#p3,#p4,#p5"，然后可以将其作为单个选择器传递给 jQuery，但没有其他方法吗？没有办法将字符串数组作为选择器传递吗？

编辑：其实有an answer out there already。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

嗯，有“加入”：

["#p1", "#p2", "#p3", "#p4", "#p5"].join(", ")

编辑 - 额外信息：

可以选择一个元素数组，问题是你还没有元素，只有选择器字符串。无论您以何种方式对其进行切片，您都必须执行类似 .getElementById 的搜索或使用实际的 jQuery 选择。

【讨论】：

join() 就是这样。谢谢。

【解决方案2】：

试试Array.join method：

var a = ["#p1", "#p2", "#p3", "#p4", "#p5"];
var s = a.join(", ");
//s should now be "#p1, #p2, #p3, ..."
$(s).whateverYouWant();

【讨论】：

【解决方案3】：

$(foo.join(", ")) 呢？

【讨论】：

【解决方案4】：

使用 array.join 方法将它们连接在一起

$(theArray.join(','));

【讨论】：

呵呵，我知道我在这该死的 iphone 上会太慢 :-)
感谢您抽出宝贵时间！

【解决方案5】：

要正式回答你的问题：用一条线：

//If this is only one use variable you can use
$(['#p1','#p2','#p3','#p4','#p5'].join(',')).methodToUse();
//if you DO need it as a variable you can
var joined = ['#p1','#p2','#p3','#p4','#p5'].join(',');
$(joined).methodsToUse();

如果你想让他们单独做某事，还有 .each();

在下面的示例中，每个 p id 点击都会使其中任何一个变为红色：

var peas = ['#p1','#p2','#p3','#p4','#p5'];
$.each(peas, i => {
    $(peas[i]).click(() => {
        $(peas[i]).css({'color':'red'});
    });
});

当您将“i”放入函数参数时，它会适当地找到数组中的值。当您执行 '.each()' 时，格式如下所示：

$.each(array, function(i){
    // any code you wish as long as you have an array selector
    //$(array[i]).whatever function
});

一个更大的例子。假设你想让你点击的 P 变成红色，但想让其他 ps 恢复默认颜色。只需创建一个从数组中删除所选 ID 的函数，瞧！

var peas = ['#p1','#p2','#p3','#p4','#p5'],
    poppy=(v,i)=>peas.toString().replace(`,${v[i]}`,'').replace(`${v[i]},`,'');

(// get each pea index
  $.each(peas,i=>///funciton(i){ code inside}

    (//set up each individual index's functions
      $('.peastock').append(`<p id="p${[i+1]}">I am ${peas[i]}</p>`),
      $(peas[i]).click(()=>(
        $(peas[i]).css({"color":"red","background-color":"rgba(128,0,0,0.1)"}),
        $(poppy(peas,i)).css({'color':'black','background-color':'rgba(255,255,255,0.2)'}))))),

  $('.peastock').append(`
    <div id="ree">ES6 isnt suitable for all of jQuery's usage!</div>
    <div>Since some functions inside of jQuery's methods dont require 'this' or 'return'</div>
    <div>You can learn this by going <a href="https://www.w3schools.com/Js/js_es6.asp">here</a></div>
  `),
  $("*").css({"margin":"0 auto","padding":"1%"}),
  $("* .peastock, .peastock, .peastock *").css({"background-color":"rgba(128,0,0,0.1)"})
);

我知道有人一定想知道每个值数组作为 jquery 选择器。希望一切顺利！

来源： jQuery .each() The fiddle in action (with updates!)

【讨论】：

【解决方案6】：

我想你正在寻找join。

var arr = ["#p1", "#p2", "#p3", "#p4", "#p5"];
$(arr.join(","))

【讨论】：

【解决方案7】：

更短：

["#p1", "#p2", "#p3", "#p4", "#p5"].toString()

【讨论】：