loop over table cells to find closest span text when checkbox is checked-CodePudding

im trying to get the span text when looping over table cells with no success i tried many combinations to find the span text


<td>
<select name="newStatus" >
    <option value="0-596">active</option>
    <option value="2-596">logout</option>
    </select>
  </td>
  
  <td >
  <input id="c57"  type="checkbox" name="tfoza" value="1">
  <label for="c57">
  <span></span>
  </label>
  <span >960</span>
  </td>
  
  <td >
  <input id="c58"  type="checkbox" name="tfoza" value="1">
  <label for="c58">
  <span></span>
  </label>
  <span >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){
 
 }
 
});

what im trying to find is the span text when the checkbox is checked JSFIDDLE what is wrong the code thanks in advanced

CodePudding user response：

This line of code $(this).find('.CellComment').text() was the problem. The find function looks for children and grand children etc inside of a parent element. That line of code is looking for .CellComment inside the checkbox, which the .each function is iterating through.

I have change that line of code to $(this).parent().find('.CellComment').text(). I have selected the parent of the checkbox using the parent() function, which selects the .CellWithComment element and then find the .CellComment element inside.

$('.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 >
      <select name="newStatus" >
        <option value="0-596">active</option>
        <option value="2-596">logout</option>
      </select>
    </td>

    <td >
      <input id="c57"  type="checkbox" name="tfoza" value="1">
      <label for="c57">
        <span></span>
      </label>
      <span >960</span>
    </td>

    <td >
      <input id="c58"  type="checkbox" name="tfoza" value="1">
      <label for="c58">
        <span></span>
      </label>
      <span >901</span>
    </td>
  </tr>
</table>