No puedo usar los identificadores o los nombres de clase asociados con las entradas debido a cómo se generan aleatoriamente en la entrada.
El renderizado se ve así:
<div class='dateSearch'> <label>Label 1</label> <input type='text' id='random_id_1'/> <span>Icon</span> <input type='text' id='random_id_2'/> <span>Icon</span> <input type='button' id='searchBtn'/> </div>No tengo control sobre el render y no puedo cambiar ningún contenido. Entonces, en cambio, estaba tratando de tomar la segunda entrada de texto y agregar una etiqueta antes.
<script> $('<label>Label 2</label>').insertBefore('.dateSearch input[type=text]:nth-child(2)') </script> .dateSearch input[type=text] agregará la etiqueta delante de ambas entradas de texto, pero :nth-child(2) no parece querer funcionar.
.dateSearch > input:nth-child(2) y tampoco funcionó. Solo quería agregar una etiqueta antes del segundo elemento de entrada.
$('<label>Label 2</label>').insertBefore('.dateSearch input[type=text]:nth-child(2)') <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <div class='dateSearch'> <label>Label 1</label> <input type='text' id='random_id_1'/> <span>Icon</span> <input type='text' id='random_id_2'/> <span>Icon</span> <button type="button" class="btn btn-secondary">Search</button> </div>Quiere que se vea así:
Etiqueta_1 [ Texto de entrada ] ( Icono ) Etiqueta_2 [ Texto de entrada ] ( Icono ) [ Botón ]
¿Estás familiarizado con eq() ? Eso soluciona el problema del selector de niños porque también puede orientar elementos por tipo.
No olvide poner un atributo for en la etiqueta para accesibilidad si puede.
const secondInput = $('.dateSearch input[type=text]').eq(1); // zero-based const secondInputId = secondInput.attr('id'); // optional, but wise const label = $('<label>Label 2</label>'); label.attr('for', secondInputId); // optional, but wise label.insertBefore(secondInput); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class='dateSearch'> <label>Label 1</label> <input type='text' id='random_id_1' /> <span>Icon</span> <input type='text' id='random_id_2' /> <span>Icon</span> <button type="button" class="btn btn-secondary">Search</button> </div>