Necesito cambiar la primera opción en las opciones de selección y colocar el texto del primer párrafo dentro, de modo que el primer párrafo sea el texto de la primera opción en el primer elemento de selección y el segundo párrafo sea la primera opción en el siguiente elemento de selección. . Sé que mi enfoque no es del todo correcto, pero lo intenté y no pude encontrar la manera correcta de hacerlo. ¿Necesito hacer un bucle? ¿O hay otra forma de hacerlo? Estoy tratando de usar jQuery.
$('.select-container p').each(function(index) { let textPar = $(this).text(); $('.select-container select option:first-child').each(function(index) { $(this).text(textPar); }); }); select { width: 200px; padding: 5px 8px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="select-container"> <p>First paragraph</p> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="select-container"> <p>Second paragraph</p> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> </div>Solo necesita pensar un poco mejor en sus selectores. Estaba actualizando el texto de todos los elementos seleccionados, por lo que debe ser más específico. Entonces, no necesita recorrer un elemento después de seleccionarlo.
$('.select-container p').each(function() { const par = $(this); const parText = par.text(); par.next('select').find('option:first-child').text(parText); }); select { width: 200px; padding: 5px 8px; } <div class="container"> <div class="select-container"> <p>First paragraph</p> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="select-container"> <p>Second paragraph</p> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>