jquery遍历表中的单元格列。

Question

我有以下html表(如果需要，我可以提供html )。单元格中的每个名称都是li中的一个锚标记。例如，如果单击“curly”，我希望遍历该列中的每个单元格，并查看其他类是否已被应用。(我的目标是应用验证，这样一个不超过3个名称的块就可以在一列中显示红色)。

如果有人知道这是怎么实现的？

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

Answer 2

这是我对我的问题的解决方案，感谢@barmer的指点，我已经能够更好地理解jQuery。请随时改进我的答案(特别是超长的if声明)。

        var clickedDoctorId = clickedApp.attr("id").slice(-1);
        var col = $(clickedApp).closest("td").index()+1; //gets the column index of the clicked appointment.
        var booked = $(clickedApp).closest("table").find("td:nth-child("+col+") a.booked"); //gets any booked appointments in the clicked column
        var bookedAppArray = [];

        booked.each(function() {
            //compares the doctor Id of each booked appointment in the selected column, with the clicked doctorId
          if(($(this).attr("id")).slice(-1) == clickedDoctorId){

              //appointment row index of appointment booked for the same doctor as the click:
              var appRowIndex = $(this).closest('tr')[0].sectionRowIndex;
              //add booked appointment index to the array:
              bookedAppArray.push(appRowIndex);
          }
        });

        var clickedAppRowIndex = $(clickedApp).closest('tr')[0].sectionRowIndex;
        //alert(clickedAppRowIndex);

        //check if array contains 3 value before, or 3 values after the clicked appointment:
        if((clickedAppRowIndex - 1 in bookedAppArray && clickedAppRowIndex - 2 in bookedAppArray && clickedAppRowIndex - 3 in bookedAppArray) || (clickedAppRowIndex + 1 in bookedAppArray && clickedAppRowIndex + 2 in bookedAppArray && clickedAppRowIndex + 3 in bookedAppArray))  {
            return true;
        }