[SOLUCIONADO] array en jquery

[elpre]

Buenos días,

tengo un problema con jquery, ahora bien, no sé si el problema viene de la parte de php o de jquery. Comentar que jquery no es que se me de muy bien y ando buscando info pero no consigo dar con la tecla correcta.

Es una tienda hecha en shopify pero el código se entiende y también aporto comentarios.
Al entrar en un producto, si por ejemplo es un anillo, hay varios tamaños, que se eligen mediante un desplegable. Necesito saber el stock pero si meto código con el que no tendría problemas para el stock, no funciona, por lo que tengo que recorrer primero el producto y después las variantes (eso lo comento ahora).
Lo que quiero hacer, es que al elegir en el desplegable el tamaño, me diga la posición en la que está en el array. Después recorro otro array con el stock que hay de ese tamaño, para que al final consiga un mensaje, diciendo que hay x stock con ese tamaño para ese anillo. Al uso fácil, pero no sale.

Tengo este código:

Código PHP:

  <select class="value_stock" data-index="option{{ forloop.index }}"> 
   {% for value in option.values %} //recorro los tamaño que hay 
      <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %} data-position="{{forloop.index}}">{{ value }}</option> //el value tiene el tamaño y el data-position tiene la posición en la que está en el array 
   {% endfor %} 
   {% for variant in product.variants %} //recorro las variantes, que es volver a recorrer los tamaños, pero en forma de variante 
      {% if variant.available %} 
         {% if variant.inventory_quantity %} //aquí consigo el stock de ese tamaño 
            {% assign auxiliar_segundo = variant.inventory_quantity %} 
               <input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="{{ auxiliar_segundo }}"> //le pongo el nombre de auxiliar_segundo para mandarlo al jquery 
            {% endif %} 
         {% endif %} 
      {% endfor %} 
</select>  
   

Código:

Aquí he estado haciendo varias pruebas, todas mal, por eso ahora mismo en lo que pongo nada tiene que ver con la posición y con el stock. Ahora mismo con conseguir recorrer el auxiliar segundo me vale
<script type="text/javascript">
  $(document).ready(function () {

    $(".value_stock").change(function () {
    var cntrol = $(this);
    var position = 'Position : ' + cntrol.find(':selected').data('position');
    var auxiliar_segundo = $('#auxiliar_segundo');
    alert(auxiliar_segundo.length); //solo me devuelve que tengo un valor
    var aux = [];
    for(var i = 0; i < auxiliar_segundo.length; i++) {
      aux[i]=auxiliar_segundo[i];
      alert(aux[i]); //este alert solo me devuelve [object HTMLInputElement]
    }
    alert(position); //esto me devuelve la posición del array correctamente
    var finalvalue = position;
    
    //$('#frase').text(finalvalue);
    
   });

  });
</script>

Si entro a la inspección de la página me sale esto. Lo que me mosquea es que está fuera del select, y no debería.

Código HTML:

<select class="value_stock single-option-selector single-option-selector-product-template-2 product-form__input" id="SingleOptionSelector-0" data-index="option1">
   <option value="5" data-position="1">5</option>                    
   <option value="5.5" data-position="2">5.5</option>
   <option value="6" data-position="3">6</option>
   <option value="6.5" data-position="4">6.5</option>
   <option value="7" data-position="5">7</option>
   <option value="7.5" data-position="6">7.5</option>
   <option value="8" selected="selected" data-position="7">8</option>
   <option value="8.5" data-position="8">8.5</option>
   <option value="9" data-position="9">9</option>
   <option value="9.5" data-position="10">9.5</option>
</select>
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="1">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0"> 

Y poco más que decir, yo me supongo que es la parte del jquery lo que está mal, que no recorro bien el array (he estado viendo en internet pero no encuentro un sitio en el que recorra algo que le viene siendo un id)

Un saludo y a ver si me podéis ayudar

[Alexis88]

Hay dos errores claros en tu código y en tu proceder:

1. El id debe ser un valor único en todo el documento HTML. Si tienes 10 elementos con el mismo id, cuando intentes tomarlos a todos a partir de dicho valor, como hiciste en var auxiliar_segundo = $('#auxiliar_segundo');, solo vas a obtener al primero de todos los elementos. Lo aconsejable es que utilices una clase, la cual sí se puede repetir.

2. Cualquier otro elemento que no sea un <option>, siempre quedará fuera de un <select>, a pesar de que lo intentes añadir mediante código. Esto sucede porque, cualquier otro elemento diferente a un <option>, no es parte de la estructura de un <select>.

Si lo que deseas es obtener la posición de un valor dentro de un arreglo, utiliza el método .indexOf(). Te mostraré dos ejemplos de su uso:

Código Javascript:

//Caso 1: Arreglo de palabras
 
var arrPalabras = ["Cuando", "Como", "Donde"], //Arreglo de palabras
    buscar = "Cuando", //Palabra a buscar
    posicion = arrPalabras.indexOf(buscar); //Intento de captura de posición de la palabra en el arreglo
 
//Si la posición es mayor a -1, quiere decir que la palabra buscada existe en el arreglo
if (posicion > -1){
    console.log("La palabra " + buscar + " se encuentra en la posición " + posicion + " del arreglo");
}
//Caso contrario
else{
    console.log("La palabra " + buscar + " no se encuentra en el arreglo");
}
 
 
//Caso 2: Lista de nodos (colección de elementos HTML)
 
var arrHTML = $(".botones"); //Colección de botones con la clase "botones"
 
//Se ejecutará una función al darle un clic a cualquier botón de la colección
arrHTML.on("click", function(){
    var boton = this, //Tomo al botón pulsado
        posicion = [].indexOf.call(arrHTML, boton); //Tomo la posición del botón en la colección
 
    /*
       Aquí ya no necesito comprobar si la posición del botón se encuentra en el arreglo
       puesto que el botón existe desde antes de ejecutarse este script
    */
 
    console.log("El botón pulsado se encuentra en la posición " + posicion + " de la colección de botones");
});
 

[elpre]

Buenos días,

gracias por la respuesta. Voy a ver si puedo pasar lo que me dices a lo que necesito.

Me tengo que guiar sobre todo por la segunda opción que me pones.
Si quisiese saber el número de elementos que tiene el array, con el .lenght me valdría??? es que una de las veces que lo he utilizado, lo que me ha dado es la longitud del valor, es decir, si el valor es 7, la longitud es 1

Un saludo

[Alexis88]

Iniciado por elpre

[...] Si quisiese saber el número de elementos que tiene el array, con el .lenght me valdría??? es que una de las veces que lo he utilizado, lo que me ha dado es la longitud del valor, es decir, si el valor es 7, la longitud es 1 [...]

La propiedad length funciona tanto para arreglos como para cadenas. La palabra "hola" tendrá un length (extensión) de 4. El arreglo [7, 8, 9] tendrá un length (cantidad de elementos) de 3.

Tienes que verificar si lo que estás evaluando es un arreglo o un elemento distinto.

[elpre]

Listo, solucionado

Muchas gracias por la ayuda

Un saludo