Question

我有一个不确定行的HTML表，但知道列数。对于每一行，我需要找到每个td都有一个“free”类。然后我需要检查第三个td，如果它还有一个“免费”类，我需要在原始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

Answer 2

要实现此目的，您可以使用两个循环。一个遍历tr，另一个遍历该行中的td.free元素。对于每个.free元素，您可以使用td检查以下第三个eq()并添加到当前元素的索引。试试这个：

$('table tr').each(function() {
  var $tr = $(this);
  var $td = $tr.find('td');

  $td.filter('.free').each(function(i) {
    $(this).toggleClass('start', $td.eq(i + 3).hasClass('free'));
  });
});

td { 
  width: 20px;
  height: 20px; 
 }
.free { background-color: #CCC; }
.not-free { background-color: #333; }
.start { background-color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <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>
</table>

使用Jquery遍历html表

2 个答案: