JavaScript 访问列表中的锚点

Question

目前，我的代码遍历 <td> 单元格中的每个 <li>，并将 class 应用于 <li>。我现在在每个 <li> 之间添加了 <a> 标签，并且在访问 <a> 时遇到问题。我基本上想为每个 <a> 标签添加一个 class 而不是 <li>。

HTML

<td style='padding: 0;' bgcolor='#FAFAFA'>
    <ul class='doctorList'>
        <li id='1'><a style='text-decoration: none;'>Curly</a></li>
        <li id='2'>Larry</li>
        <li id='3'>Moe</li>
    </ul>
</td>

JavaScript

function mapBookedAppointmentsToCalendar()
{
    var bookedAppointmentsArray = <?php echo json_encode($mappingIdArray) ?>;
    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 k = 0; k < li.length; k++) {
                for (var a = 0; a < bookedAppointmentsArray.length; a++)
                {
                    if (li[k].id == bookedAppointmentsArray[a])
                    {
                        li[k].className = "colorRed booked";
                        break;
                    } else
                    {
                        li[k].className = "colorGreen";
                    }
                }
            }
        }
    }
}

Answer 1

您不需要使用 table 来访问它。请记住 getElementsByClassName 方法：

u = document.getElementsByClassName('doctorList');
    for (i = 0; i < u.length; i++){
      l = u[i].getElementsByTagName('li');
      for (j = 0; j < l.length; j++){
        l[j].className = 'red';
      }
    }

检查这个 demo

Answer 2

您是否尝试过使用查询选择器找到那些 <a>？

var li = col.querySelectorAll("#tbl_calendar li a");
for (var k = 0; k < li.length; k++) {
    for (var a = 0; a < bookedAppointmentsArray.length; a++)
    {
        if (li[k].id == bookedAppointmentsArray[a])
        {
            li[k].className = "colorRed booked";
            break;
        } else
        {
            li[k].className = "colorGreen";
        }
    }
}

Answer 3

如果你不需要旧浏览器支持，你可以这样做：

var ul = document.querySelector('ul.doctorList');
var li = ul.querySelectorAll('li');

// convert the node list to an array
li = [].slice.call(li);
li.forEach(function(element) {
  if (element.id === '1') {
    var a = element.querySelector('a');
    a.className = 'red';
  }
});

var ul = document.querySelector('ul.doctorList');
var li = ul.querySelectorAll('li');

// convert the node list to an array
li = [].slice.call(li);
    li.forEach(function(element) {
      if (element.id === '1') {
        var a = element.querySelector('a');
        a.className = 'red';
      }
    });

.red {
  color: red;
}

<td style='padding: 0;' bgcolor='#FAFAFA'>
    <ul class='doctorList'>
        <li id='1'><a style='text-decoration: none;'>Curly</a></li>
        <li id='2'>Larry</li>
        <li id='3'><a style='text-decoration: none;'>Moe</a></li>
    </ul>
</td>

JavaScript 访问列表中的锚点

JavaScript access anchor in list

html

javascript

iteration