jquery - 使用Jquery遍历html表

Question

我有一个 HTML 表格，行数不确定，但列数已知。对于每一行，我需要找到每个具有“free”类别的 td。然后我需要检查接下来的第三个 td，如果它也有一个“free”类，我需要向原始 td 添加一个“start”类。作为一个包含 6 个 tds 的 tr 的示例，如下所示；

    <tr>
    <td class="free"></td> 
    <td class="free"></td>
    <td class="free"></td>
    <td class="free"></td>
    <td class="free"></td>
    <td class="not-free"></td>
    <td class="not-free"></td>
    </tr>

看起来像这样:

    <tr>
    <td class="free start"></td> 
    <td class="free start"></td>
    <td class="free"></td>
    <td class="free"></td>
    <td class="free"></td>
    <td class="not-free"></td>
    <td class="not-free"></td>
    </tr>

我可以找到每个 td 的索引，但不确定如何找到后面的第三个索引

    $('td.free').each(function() {
        var this_unit = $(this).index() 
         ......
    })

Answer 1

您可以使用 free 类来循环遍历 td 元素

$('td.free').each(function(i, td) {

    var $otherTd = $(td).next().next().next();

    // could be more specific by using $td.next('td') instead of just .next()

    if ($otherTd.hasClass('free')) {
        $(td).addClass('start');
    }
});

https://codepen.io/martincarlin87/pen/Njvxva