列表中的 JavaScript 访问锚点答案

【问题标题】：JavaScript access anchor in list列表中的 JavaScript 访问锚点
【发布时间】：2015-12-05 22:43:13
【问题描述】：

目前，我的代码遍历<td> 单元格中的每个<li>，并将一个类应用于<li>。我现在在每个<li> 之间添加了<a> 标签，并且在访问<a> 时遇到问题。我本质上想为每个<a> 标签而不是<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";
                    }
                }
            }
        }
    }
}

【问题讨论】：

您对第三方库的开放程度如何？这对 jQuery 来说是小菜一碟。
我是 javascript 和 jQuery 的新手。由于我的背景，我更喜欢 JavaScript。我感觉我已经完成了一半，我只想使用我当前的代码访问和
，如果你知道方法

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"; } } }

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'; } }

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

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