una matriz de cadenas como un selector jQuery?

3 minutos de lectura

avatar de usuario
montrealista

Tengo una serie de cadenas que son selectores de jQuery válidos (es decir, ID de elementos en la página):

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

Quiero seleccionar elementos con esos ID en una matriz jQuery. Esto es probablemente elemental, pero no puedo encontrar nada en línea. Podría tener un bucle for que crea una cadena "#p1,#p2,#p3,#p4,#p5" que luego podría pasarse a jQuery como un selector único, pero ¿no hay otra forma? ¿No hay una manera de pasar una matriz de cadenas como selector?

EDITAR: En realidad, ya existe una respuesta.

Bueno, hay ‘unirse’:

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

EDITAR – Información adicional:

Es posible seleccionar una matriz de elementos, el problema aquí es que aún no tiene los elementos, solo las cadenas de selección. De cualquier forma que lo corte, tendrá que ejecutar una búsqueda como .getElementById o usar una selección real de jQuery.

  • join() es exactamente eso. Gracias.

    – montrealista

    16 de junio de 2009 a las 15:12

Prueba el método Array.join:

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

Qué pasa $(foo.join(", "))?

Use el método array.join para unirlos

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

avatar de usuario
gareth compton

Voy a responder oficialmente a su pregunta: con una sola línea:

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

Si quieres que hagan algo individualmente, también hay .each();

En el siguiente ejemplo, cada clic de p id hace que cualquiera de ellos sea rojo:

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

Cuando arroja ‘i’ en un parámetro de función, encuentra los valores dentro de las matrices de manera adecuada. Cuando haces ‘.each()’, el formato se ve así:

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

Un ejemplo aún más grande. Digamos que quiere hacer que la P en la que hace clic sea roja, pero quiere que las otras p vuelvan al color predeterminado. ¡Simplemente haga una función que elimine la ID seleccionada de la matriz y listo!

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)"})
);

Sé que alguien seguramente querrá saber acerca de cada matriz de valores como selectores de jquery. ¡Espero que todo vaya bien!

Fuente:
jQuery .each()
El violín en acción (¡con actualizaciones!)

avatar de usuario
Marca

creo que estas buscando unirse.

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

Corto:

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

¿Ha sido útil esta solución?