jquery - jQuery 何时使用下一个、查找、最近？

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");

来自文档

最近的

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

兄弟姐妹

获取匹配元素集中每个元素的兄弟姐妹，可选地由选择器过滤。