Jqueryを使用したトラバースhtmlテーブル

Question

私は不確定な行のHTMLテーブルを持っていますが、既知の数のカラムがあります。それぞれの行について、「無料」のクラスを持つ各tdを見つける必要があります。私はそれに続く3番目のtdをチェックする必要があります。また、 "free"のクラスがある場合は、元のtdに "start"のクラスを追加する必要があります。例として、このような6tdsの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> 

次のようになります。私は、それぞれのTDのインデックスを見つけることが、その後に続く第3のインデックスを見つける方法を確認していないことができ

<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.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

これを実現するには、2つのループを使用できます。 1つはtrを反復し、もう1つはその行のtd.free要素を通過します。 .free各要素に対して、eq()を使用して3番目のtdをチェックし、現在の要素のインデックスに追加することができます。あなたは、各TDのインデックスを見つけるのコードを追加します。

$('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>