選中復選框時，回圈遍歷表格單元格以查找最接近的跨度文本-有解無憂

我在回圈遍歷表格單元格時嘗試獲取跨度文本但沒有成功我嘗試了很多組合來找到跨度文本


<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){
 
 }
 
});

我試圖找到的是選中復選框時的跨度文本 JSFIDDLE 代碼出了什么問題，謝謝

uj5u.com熱心網友回復：

這行代碼$(this).find('.CellComment').text()就是問題所在。find 函式在父元素中查找子元素和大子元素等。該行代碼正在.CellComment復選框內查找，該.each函式正在迭代該復選框。

我已將該行代碼更改為$(this).parent().find('.CellComment').text(). 我已經使用該函式選擇了復選框的父級，該parent()函式選擇.CellWithComment元素，然后在其中找到.CellComment元素。

$('.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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/489714.html

標籤：javascript jQuery

上一篇：串列值未填充到ASP.NETMVC的表中

下一篇：在d3圖表層次結構中添加子類