jQuery何时使用next，find，nearest？

Question

我正在尝试选择最近的show_data div toggle_container div ...但是没有选择任何内容。

html：

<div class="section_header">
    HEADER
    <div class="toggle_container">
        Hide
    </div>
</div>
<div class="show_data">
    HEADER <span id="show_viewed_link">Show</span>
</div>

jquery的：

$(".show_data").css("display", "none");
$(".toggle_container").live('click', function () 
{
    if ($.trim($(this).html()) === 'Hide') 
    {
        $(this).parent().slideUp("normal");
        $(this).parent().closest(".show_data").css("display", "block");
    } 
    else 
    { 
        $(this).parent().slideDown("normal");
        $(this).parent().closest(".show_data").css("display", "none");
    }
});

Answer 1

你需要兄弟姐妹： -

最近搜索遍历DOM树，但此处show_data不是toggle_container的祖先。它是其父母的兄弟姐妹。

$(this).parent().siblings(".show_data").css("display", "block");

而不是： -

$(this).parent().closest(".show_data").css("display", "block");

来自Doc

最近的

  

对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

邻近

  

获取匹配元素集中每个元素的兄弟元素，可选择通过选择器进行过滤。