jquery淡入淡出/表格行取决于ID

Question

我希望标题清楚，试图寻找类似的东西，但无法真正找到它。

好了，所以这是我的代码至今：

$(document).ready(function(){ 

    $('.collapsed-reorder').click(function(){ 

     $('.history-item').fadeToggle("500"); 
     $('.order-titels').fadeToggle("500"); 
     $(this).toggleClass('active-bar'); 
     $('.icon-right').attr('src',"images/icon-down.png"); 

    }); 
}); 

编辑;忘了HTML代码。

<tr class="collapsed-reorder" id="1"> 

      <td class="right-icon" colspan="2"><img class="icon-right" src="images/icon-right.png"> </td> 
      <td colspan="1">#20234</td> 
      <td colspan="1">29-07-15</td> 
      <td colspan="8">2</td> 
      <td class="repeat-order" colspan="2">Repeat order </td> 

    </tr> 

    <tr class="order-titels"> 

      <th colspan="8" class="item">ITEM</th> 
      <th class="price">PRICE</th> 
      <th class="qty">QTY</th> 
      <th class="type">TYPE</th> 
      <th class="sub-total">SUBTOTAL</th> 
      <th class="your-price">YOUR PRICE</th> 
      <th class="remove">REMOVE</th> 

    </tr> 
      <tr class="history-item"> 

       //In here is a lot more data in td's, but I don't think that's relevant here. 

      </tr> 

这里是做什么的（明显的那种，但耶）现在： 每当我点击DIV倒塌，重新排序，在div历史项目和订单titels淡入和点击时淡出再次向被点击的div添加一个类。这是应该的，但是会有更多的div与名称折叠重新排序，和更多的历史项目。每个折叠重新排序div有他自己的ID（1，2，3等）

所以我的问题是，我如何淡入/淡出属于折叠重新排序的历史项目？

我不确定我是否清楚地解释它，如果不是，请让我知道，我会尽力做出更具体的说明。提前致谢！

编辑：这里是小提琴，如果这实际上会帮助任何哈哈。 http://jsfiddle.net/7x5taLn9/6/

Answer 1

您寻找的是这样的：

$(this).parent().find('.history-item').fadeToggle("500"); 
$(this).parent().find('.order-titels').fadeToggle("500"); 
$(this).toggleClass('active-bar'); 
$(this).parent().find('.icon-right').attr('src', "images/icon-down.png"); 

小提琴：http://jsfiddle.net/7x5taLn9/2/。

编辑：如果你想要做一个表，使用$的.next（）函数，就像这样：

var $this = $(this); 
var $currentEl = $this; 
// Search for .history-items after this element and before the end of the parent element 
while ($currentEl.next().length > 0 && !$currentEl.next().hasClass('collapsed-reorder')) { 
    $currentEl = $currentEl.next(); 
    if ($currentEl.hasClass('history-item')) { 
     $currentEl.fadeToggle("500"); 
    } 
} 

小提琴：http://jsfiddle.net/7x5taLn9/7/。