Me gustaría usar .each para cambiar la primera opción de cada elemento de selección individual. El código debajo de todo funciona. Puede ver el .each que se usa para cambiar (resaltar) el borde de cada elemento seleccionado cuando está enfocado. Sin embargo, no puedo entender cómo hacer que funcione para reemplazar las primeras opciones.
$(".select").focusout(function() { $(".select").css({ "border-color": dd_border_color, "box-shadow": "unset" }); }); $(".select").each(function(i) { $(this).focus(function() { $(this).css({ "border-color": dd_border_color_s, "box-shadow": dd_box_shadow }); }); }); $('.select[id*=sub1] option:eq(0)').replaceWith("<option value disabled hidden></option>"); $('.select[id*=sub2] option:eq(0)').replaceWith("<option value disabled hidden></option>"); $('.select[id*=sub3] option:eq(0)').replaceWith("<option value disabled hidden></option>"); $('.select[id*=sub4] option:eq(0)').replaceWith("<option value disabled hidden></option>"); $('.select[id*=sub5] option:eq(0)').replaceWith("<option value disabled hidden></option>"); $('.select[id*=sub6] option:eq(0)').replaceWith("<option value disabled hidden></option>"); $('.select[id*=sub7] option:eq(0)').replaceWith("<option value disabled hidden></option>"); $('.select[id*=sub8] option:eq(0)').replaceWith("<option value disabled hidden></option>");Lo intenté:
$('.select[id*=sub] option:eq(0)').each(function(i) { $(this).replaceWith("<option value disabled hidden></option>"); });Y una serie de otras combinaciones, usando .eq(0) en diferentes lugares. Reemplazó la primera opción de la primera selección o no hizo nada en absoluto. Una vez que descubrí cómo hacer esto correctamente, me ayudará a ordenar mi código en varias páginas en algunos cuestionarios en línea que estoy haciendo.
El 90% de las veces, el uso de #id es en realidad un obstáculo. Además, si se usa jQuery, #id es innecesario el 99% del tiempo. :eq() solo devuelve una única coincidencia. Para usarlo en múltiples objetivos, debe estar dentro del bucle o iteración real.
La forma más fácil es eliminar :eq() y simplificar el selector:
$('.select option:first-of-type').each(function() { $('.select option:first-of-type').each(function() { $(this).replaceWith("<option selected>This is the new default option</option>"); }); <select class='select'> <option>0</option> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select> <select class='select'> <option>0</option> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select> <select class='select'> <option>0</option> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select> <select class='select'> <option>0</option> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select> <select class='select'> <option>0</option> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select> <select class='select'> <option>0</option> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select> <select class='select'> <option>0</option> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select> <select class='select'> <option>0</option> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>el problema con
$('.select option:eq(0)')es el equivalente de
$('.select[id*=sub] option').first() console.log($("select option:eq(0)").length) console.log($("select option:eq(0)").length === 1) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select> <option></option><option></option><option></option> </select> <select> <option></option><option></option><option></option> </select> <select> <option></option><option></option><option></option> </select> Use :first-child() en su lugar. También hay otros métodos, como :first-of-type y :nth-child(1) (basado en 1).
Nota: :eq(n) ha quedado en desuso de jquery
console.log($("select option:first-child").length) console.log($("select option:first-child").length === 3) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select> <option></option><option></option><option></option> </select> <select> <option></option><option></option><option></option> </select> <select> <option></option><option></option><option></option> </select>