Javascript/JQuery добавить class к каждому элементу внутри tr таблицы

326

19 декабря 2017, 16:28

Подскажите, как добавить для такой таблицы для каждого элемента <tr class="tr_elem"> добавить класс open. Но добавить только к рамках текущего `

Начал задумку как

$(document).ready(function(){ 
 $(this).parent().children('.tr_elem').toggle('normal').addClass('open'); 
  return false; 
 }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table class="table"> 
   <tbody> 
      <tr class="top"> 
          <td class="click">Click 1</td> 
      </tr> 
      <tr class="tr_elem"> 
          <td>some text 1</td> 
          <td>some text 2</td> 
      </tr> 
      <tr class="tr_elem"> 
          <td>some text 3</td> 
          <td>some text 4</td> 
      </tr> 
      <tr class="top"> 
          <td class="click">Click 2</td> 
      </tr> 
      <tr class="tr_elem"> 
          <td>some text 5</td> 
          <td>some text 6</td> 
      </tr> 
      <tr class="tr_elem"> 
          <td>some text 7</td> 
          <td>some text 8</td> 
      </tr> 
</tbody> 
</table>

То есть при нажатии на Click 1 должны развернуться все элементы tr до следующего class="click"

Answer 1

Возможно, вам поможет nextUntil ?

$(".click").click(function(){      
      
     $(this).closest(".top") 
            .nextUntil(".top", ".tr_elem") 
            .addClass("open"); 
 
  });

.open td { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table class="table"> 
   <tbody> 
      <tr class="top"> 
          <td class="click">Click 1</td> 
      </tr> 
      <tr class="tr_elem"> 
          <td>some text 1</td> 
          <td>some text 2</td> 
      </tr> 
      <tr class="tr_elem"> 
          <td>some text 3</td><td>some text 4</td> 
      </tr> 
      <tr class="tr_elem"> 
          <td>some text 3</td><td>some text 4</td> 
      </tr> 
      <tr class="top"> 
          <td class="click">Click 2</td> 
      </tr> 
      <tr class="tr_elem"> 
          <td>some text 5</td> 
          <td>some text 6</td> 
      </tr> 
      <tr class="tr_elem"> 
          <td>some text 7</td> 
          <td>some text 8</td> 
      </tr> 
</tbody> 
</table>