Tengo una tabla, cuyas filas y td se crean con un foreach. Por lo tanto, no se puede predecir cuántas filas puede haber. Cada fila tiene dos botones acompañados de dos campos de entrada adyacentes. Ver imagen: Imagen de la tabla Cuando hace clic en un botón, necesito tomar el valor dentro de su entrada adyacente que está envuelta en un td. Lo he intentado todo: anterior(), más cercano(), por ejemplo(). Y no puedo averiguar cómo aislar la entrada específica al hacer clic . Lo mejor que he logrado es aplicar algo de css a TODAS las entradas, pero no a la entrada asociada específica.
HTML
<tbody> @foreach($registeredChildren as $child) <tr> <td class="col-2"><a href="'/getchild/'+ {{$child->child_id}}">{{$child->childFirstName}}</a>    {{$child->childLastName}}</td> <!--========TIME IN===========--> <td class="col-3 pb-2 timeIn"> <input id="{{$child->child_id}}" class=" form-control " value="{{$child->timeIn}}" style="text-align:center;" type="text"> </td> <td><button class="btn btn-outline-success timeInReset">Reset</button></td> <!-- //========TIME Out ===========//--> <td class="col-3 pb-2"><input style="text-align:center;" class="form-control " type="text" ></td> <td><button id="timeOut/{{$child->child_id}}" class="btn btn-outline-success out">Reset</button></td> </tr> @endforeach </tbody>Guión - ¡Esto no funciona!
$(document).ready(function(){ $("button.timeInReset").click( function () { $(this).closest("td.timeIn>input").css({"color": "red", "border": "2px solid red"}); });El closest no busca elementos hermanos, sino desde el nivel actual hacia arriba en el árbol DOM para los padres.
Para cada elemento del conjunto, obtenga el primer elemento que coincida con el selector probando el propio elemento y recorriendo sus ancestros en el árbol DOM.
$("button.timeInReset").click( function () { $(this).closest("tr").find("td.timeIn>input").css({"color": "red", "border": "2px solid red"}); });