jquery iterate through cell column in table

Question

I have the following html table (I can provide the html if required). Each name within a cell, is a anchor tag in a li. For example, If 'curly' is clicked, I'd like to loop through each cell in that column and see that other classes curly as applied. (My aim is to apply validation, so a block of no more than 3 names can be red in a column).

As anyone got an idea how this can be achieved?

 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>

This shows what a 'booked' appointments looks like.

Answer 1

This was my solution to my question, thank to the pointers from @barmer, I have been able to understand jQuery a little better. Please feel free to improve my answer (especially the super long if statement).

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

Answer 2

Use .index() to get the column number of the td containing the clicked link. Then substitute that into a selector to find the same column in all the rows.

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

If you just want to count the number of booked items, you don't need a loop, you can just use .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());
    }
});