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();
        });

当我点击任何带有“description”类名的链接时，所有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将是.slidingDiv的tr

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

2 个答案: