Jquery fadein/out table 行取决于 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 collapsed-reorder 时，div history-item 和 order-titels 淡入并在再次单击时淡出并添加一个 class div 被点击。这是正常工作的，但会有更多 div 的名称折叠 re-order，以及更多的 history-item。每个 collapsed-reorder div 都有自己的 ID（1、2、3 等）

所以我的问题是，如何淡化 in/out 属于 collapsed-reorder 的 history-item？

我不确定我是否解释清楚了，如果没有请告诉我，我会尝试更具体一些。提前致谢！

编辑：这是 Fiddle，如果这真的有帮助的话哈哈。 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");

Fiddle: http://jsfiddle.net/7x5taLn9/2/.

编辑：如果您想一次性完成 table，请像这样使用 $.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");
    }
}

Fiddle: http://jsfiddle.net/7x5taLn9/7/.

Jquery fadein/out table 行取决于 ID

Jquery fadein/out table row depending on ID

html

jquery

fadeout

fadein