jquery - 显示/隐藏具有相同类名的多个 DIV

Question

我正在循环生成以下 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>

我有以下 jQuery 代码来显示/隐藏类名“slidingDiv”的 div：

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

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

当我单击任何带有“描述”类名称的链接时，所有 div 都会显示。我只想显示与我单击的“描述”链接相对应的 div。

我试过这样的事情：

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

但没有成功。任何帮助，将不胜感激。

Answer 1

您需要一直向上到树tr，然后进入兄弟tr：

$('.description').click(function () {
    $(this).closest("tr").next().find(".slidingDiv").slideToggle();
});

Answer 2

试试下面的代码，

$('.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 的下一个将是.slidingDivtr