Estoy tratando de obtener el texto span al recorrer las celdas de la tabla sin éxito.
<td> <select name="newStatus" class="stChange"> <option value="0-596">active</option> <option value="2-596">logout</option> </select> </td> <td class="CellWithComment"> <input id="c57" type="checkbox" name="tfoza" value="1"> <label for="c57"> <span></span> </label> <span class="CellComment">960</span> </td> <td class="CellWithComment"> <input id="c58" type="checkbox" name="tfoza" value="1"> <label for="c58"> <span></span> </label> <span class="CellComment">901</span> </td> </tr>jquery:
$('.stChange').on('change', function () { var st = $(this).val(); var vls = st.split('-'); if( vls[0] == 0){ console.log('0',st); $(this).closest('tr').find('input[type=checkbox]:checked').each(function(){ console.log($(this).find('.CellComment').text()) ; }); } if( vls[0] == 2){ } }); Estoy tratando de encontrar el texto span cuando la casilla de verificación está marcada ( JSFiddle ).
¿Qué está mal con el código?
Esta línea de código $(this).find('.CellComment').text() era el problema. La función de búsqueda busca hijos y nietos, etc. dentro de un elemento principal. Esa línea de código está buscando .CellComment dentro de la casilla de verificación, a través de la cual itera la función .each .
He cambiado esa línea de código a $(this).parent().find('.CellComment').text() . He seleccionado el padre de la casilla de verificación usando la función parent() , que selecciona el elemento .CellWithComment y luego encuentra el elemento .CellComment dentro.
$('.stChange').on('change', function (event) { var st = $(this).val(); var vls = st.split('-'); if( vls[0] == 0){ $(event.target).closest('tr').find('input[type=checkbox]:checked').each(function() { console.log($(this).parent().find('.CellComment').text()); }); } if( vls[0] == 2){ } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <table> <tr> <td class="test"> <select name="newStatus" class="stChange"> <option value="0-596">active</option> <option value="2-596">logout</option> </select> </td> <td class="CellWithComment"> <input id="c57" type="checkbox" name="tfoza" value="1"> <label for="c57"> <span></span> </label> <span class="CellComment">960</span> </td> <td class="CellWithComment"> <input id="c58" type="checkbox" name="tfoza" value="1"> <label for="c58"> <span></span> </label> <span class="CellComment">901</span> </td> </tr> </table>