当复选框被选中时，循环遍历表格单元格以查找最近的span文本

Question

我试图在循环表单元格时获得span文本，没有成功。

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

}

});

当复选框被选中时，我试图找到span文本(JSFiddle)。

代码有什么问题?

Answer 1

这行代码$(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>