Question

我正在尝试根据源textarea在单独的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以及标头DOM的深度。

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

Answer 2

您可以像这样编辑CSS：

/** edit this **/
h1,h2,h3,h4,h5,h6 { font-weight: bold; color: #069; display: block !important;}

/** add this **/
div#toc *
{
  display:none;   
}

这会隐藏ID为toc的div中的所有子项，但!important;上的display h指令会忽略该值。

Answer 3

您可以使用此代码：

destination.find(':not(h1, h2, h3, h4, h5, h6)')

请参阅此处的工作示例：http://jsfiddle.net/mikhailov/AdsbA/1/

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

3 个答案: