javascript - 使用 jquery 遍历 html 表行以获取单元格内的 div id

Question

我想遍历表 id="myTable" 中每一行中的每个单元格并获取单元格子 div 的 id。

到目前为止，我有类似的东西：

$("td.theCell").each(function() {
  var id = $(this).attr('id'); //this would give me the td id but I want its child div's id
});

我的 html 是这样的：

<table id='myTable'>
  <tr>foo</tr>
  <tr>bar</tr>
    <td>foo</td>
    <td class='theCell'>
      <div id='myDiv'>foo</div>
    </td>
  <tr>foo</tr>
  <tr>bar</tr>
</table>

有人知道这样做的好方法吗？提前致谢。

Answer 1

试试这个

$("td.theCell").each(function() {
  var id = $(this).find('div').attr('id'); 
});

您需要正确获取 div 的ID而不是 td.thecell 元素。所以你需要使用.find()来选择里面的潜水..

Answer 2

将所有 div id 保存在一个数组中。使用.each jsfiddle

var dividlist = [];
$("td.theCell div").each(function() {
     dividlist.push(this.id);
});

Answer 3

您也可以不使用 find 直接选择子 div：

$("td.theCell div").each(function() {    
      var id = this.id
});​

Answer 4

使用find获取后代 div ：

$("td.theCell").each(function() {
  var id = $(this).find('div').attr('id'); 
});

Answer 5

您可以通过选择器中的小改动来做到这一点

$("#myTable tr > td.theCell > div").each(function() {//you can remove the '>' if you don't just want the direct children only 
  var k = $(this).attr('id'); 
  console.log(k);
});​