0

次の HTML を生成する結果セットをループしています。

 <tr>
    <td class="optionItems">
        Test<br />
        Test<br />
        <a href="#" class="description" >
            <img src="../../Images/Magnifying-Glass-icon.png"/>&nbsp;Description
        </a>
    </td>

    <td colspan="2" class="optionItemsLast">
        <input type="submit" value="Book" class="buttonGreen" />
    </td>
</tr>

<tr>
    <td colspan="3" class="optionItems">
        <div class="slidingDiv">
            Test><br />
        </div>
    </td>
</tr>

クラス名「slidingDiv」のdivを表示/非表示にする次のjQueryコードがあります。

 $(".slidingDiv").hide();
        $(".description").show();

        $('.description').click(function () {
            $(".slidingDiv").slideToggle();
        });

「説明」クラス名のリンクをクリックすると、すべての div が表示されます。クリックした「説明」リンクに対応する div のみを表示したいだけです。

私はこのようなことを試しました：

$('.description').click(function () {
            $(this).parent().children(".slidingDiv").slideToggle();
            //$(".slidingDiv").slideToggle();
        });

しかし、成功しませんでした。どんな助けでも大歓迎です。

4

2 に答える 2

2

ツリーをずっと上ってtr、兄弟に移動する必要がありtrます。

$('.description').click(function () {
    $(this).closest("tr").next().find(".slidingDiv").slideToggle();
});
于 2012-04-17T20:25:21.523 に答える
1

以下のコードを試してください。

$('.description').click(function () {
     $(this)
        .closest('tr')       //get the closest tr
        .next()              //get the next row of that tr
        .find('.slidingDiv') //find .slidingDiv in next row
        .slideToggle()          
});

仮定: 2 つの tr は関連しており、.description最も近い tr の次は.slidingDivの trになる

于 2012-04-17T20:24:27.317 に答える