jquery 遍历表中的单元格列

Question

我有以下 html 表(如果需要，我可以提供 html)。单元格中的每个名称都是 li 中的 anchor 标记。例如，如果单击“curly”，我想循环遍历该列中的每个单元格并查看应用的其他类curly。 (我的目标是应用验证，因此一列中不超过 3 个名称的 block 可以为红色)。

有人知道如何实现这一目标吗？

 HTML: <div class="container">
    <table id="tbl_calendar" class="table table-bordered calendar">
        <thead>
            <tr>
                <td><span class="glyphicon glyphicon-calendar"></span></td>
                <td id="2015-11-30" style="font-weight: bold;">Monday <br> 30/11/2015 </td>
                <td id="2015-12-01" style="font-weight: bold;">Tuesday <br> 01/12/2015</td>
                <td id="2015-12-02" style="font-weight: bold;">Wednesday <br> 02/12/2015</td>
                <td id="2015-12-03" style="font-weight: bold;">Thursday <br> 03/12/2015</td>
                <td id="2015-12-04" style="font-weight: bold;">Friday <br> 04/12/2015</td>
            </tr>

            <tr><td id='910' style='font-weight: bold'> 9-10 </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td></tr><tr><td id='1011' style='font-weight: bold'> 10-11 </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>
                           </td><td style='padding: 0;' bgcolor='#FAFAFA'>
                            <ul class='doctorList'>
                                <li><a id='1' href='#'>Curly</a></li>
                                <li><a id='2' href='#'>Larry</a></li>
                                <li><a id='3' href='#'>Moe</a></li>
                            </ul>

这显示了“预订”约会的样子。

Answer 1

使用.index()获取包含点击链接的td的列号。然后将其替换为选择器以在所有行中查找相同的列。

$("td a").click(function() {
    var col = $(this).closest("td").index()+1; // +1 because :nth-child is 1-based
    $(this).closest("table").find("td:nth-child("+col+") a.booked").each(function() {
        // do something with the booked anchors
    });
});

如果你只是想统计预订的商品数量，则不需要循环，只需使用.length即可。

$("td a").click(function() {
    $(this).addClass("booked");
    var col = $(this).closest("td").index()+1; // +1 because :nth-child is 1-based
    var booked = $(this).closest("table").find("td:nth-child("+col+") a.booked");
    if (booked.length > 3) {
        alert("Too many items booked for " + $(this).closest("table").find("tr:first td:nth-child("+col+")").text());
    }
});