JavaScript 遍历单元格子元素

Question

我正在尝试遍历 javascript 中的 html 表并更新 td 标记中列表项的 id。我目前无法访问这些元素。我需要访问的标签是；

<td>
  <li id='1'>Curly</li>
  <br />
  <li id='2'>Larry</li>
  <br />
  <li id='3'>Moe</li>
</td>

我当前的 JavaScript 在下面，它可以让我进入单元格。谁能建议如何访问 li 的 ID？

var table = document.getElementById("tbl_calendar");

for (var i = 0, row; row = table.rows[i]; i++) {
  for (var j = 0, col; col = row.cells[j]; j++) {

  }
}

Answer 1

AtheistP3ace 已经发布了一个很好的答案，但我是新来的，想尝试回答自己，所以这是我做的一个小提琴，不确定它是否是你想要的，我使用 jquery，因为我在你的标签中看到它：@ 987654321@

$("td").each(function() {
  $(this).find('li').each(function() {
      console.log($(this).attr("id"));
  });
});

Answer 2

你可以考虑使用类似这样的jQuery

$(document).ready(function(){
        $( "td > li" ).each(function() {
          $( this ).attr("id","foo" );
       });
    });

Answer 3

您可以使用querySelectorAll 在下面的示例中选择该单元格中的所有lis。此外，如果没有将 ul 或 ol 包装在 lis 中，它也是无效的 HTML。

小提琴：http://jsfiddle.net/AtheistP3ace/ukgfekey/

JS：

var table = document.getElementById("tbl_calendar");

for (var i = 0, row; row = table.rows[i]; i++) {
  for (var j = 0, col; col = row.cells[j]; j++) {
    var li = col.querySelectorAll('li');
    for (var index = 0; index < li.length; index++) {
        alert(li[index].id + ': ' + li[index].textContent);
    }
  }
}

HTML：

<table id="tbl_calendar">
  <tr>
    <td>
      <ul>
        <li id='1'>Curly</li>
        <br />
        <li id='2'>Larry</li>
        <br />
        <li id='3'>Moe</li>
      </ul>
    </td>
  </tr>
</table>

您还标记了 jQuery，以便尽最大努力得到充分解释。

小提琴：http://jsfiddle.net/AtheistP3ace/ukgfekey/1/

var table = document.getElementById("tbl_calendar");

for (var i = 0, row; row = table.rows[i]; i++) {
  for (var j = 0, col; col = row.cells[j]; j++) {
    var li = $(col).find('li');
    for (var index = 0; index < li.length; index++) {
            alert($(li[index]).attr('id') + ': ' + $(li[index]).text());
    }
  }
}

正如 cmets 中所述，您不需要所有这些循环。如果你只想要一个表中的所有lis，你可以这样做：

小提琴：http://jsfiddle.net/AtheistP3ace/ukgfekey/2/

var table = document.getElementById("tbl_calendar");

var li, lis = table.querySelectorAll('tr td li');
for (var index = 0; index < lis.length; index++) {
  li = lis[index];
  alert(li.id + ': ' + li.textContent);
}