jquery - 如何过滤动态元素中的元素

Question

我试图基于源文本区域在单独的 div 中显示“实时”目录。这涉及隐藏除 h1、h2、h3、h4、h5、h6 标签之外的所有内容。我该怎么做？我在 #toc 元素上使用 .show() 和 .hide() 尝试了几个函数，但没有效果。

你能指出我正确的方向吗？

这是我写的 jQuery，我的问题在评论中。这个“工作”版本位于 http://jsfiddle.net/supertrue/vQvQE/

    // selector for the source textarea
    var textarea = $('textarea#source');
    // selector for the destination
    var destination = $('#toc');

    textarea.keyup(function() {

        destination.html( textarea.val() );

    });

    // now hide everything in #toc except h1,h2,h3,h4,h5,h6
    // How do I do this?

Answer 1

Josh 的 CSS 技巧非常酷，我可能会同意。但是，如果您想使用 jQuery(也许您想在访问 #toc 的过程中对 HTML 进行更多修改)，那么您最好寻找您想要的内容，而不是试图摆脱您不需要的内容想要:

source.keyup(function() {
    var html = '<div>' + source.val() + '</div>';
    var hs   = $(html).find('h1,h2,h3,h4,h5,h6');
    destination.empty().append(hs);
});

<div>包装器允许我们使用 find 这样我们就不用担心 filter 以及 header 在 DOM 中的深度。

演示:http://jsfiddle.net/ambiguous/EbkTZ/