Как фильтровать элементы в динамическом элементе

#jquery

Вопрос:

Я пытаюсь показать «живое» оглавление в отдельном div на основе исходного текстового поля. Это включает в себя скрытие всего, кроме тегов h1, h2, h3, h4, h5, h6. Как бы я это сделал? Я попробовал несколько функций, используя .show() и .hide() для элементов #toc, но это не дало никакого эффекта.

Можете ли вы указать мне правильное направление?

Вот 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?

Ответ №1:

CSS-трюк Джоша довольно крутой, и я бы, наверное, пошел с этим. Но, если вы хотите использовать jQuery (возможно, вы хотите немного изменить HTML на своем пути #toc ), тогда вам лучше искать то, что вы хотите, а не пытаться избавиться от того, что вам не нужно:

 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 /

1. Мне нравится ваше решение, потому что оно как бы защищает от сценариев x-site. Чего я не понимаю, так это почему он это делает? Если вы добавите тег script для оповещения о сообщении, нефильтрованная версия всегда будет выполнять сценарий, но ваш метод этого не делает.

2. @rkw: AFAIK <div> оболочка сортирует <script> элементы. Браузер выталкивает <script> за пределы <div> , а затем игнорируется, потому find что заглядывает внутрь вещей. Попробуйте $('<div><script>x</script></div>') в консоли, и вы увидите, что он превращается [<div>,<script>] в. Таким образом, защита, вероятно, зависит от браузера.

Ответ №2:

Вы можете редактировать свой CSS следующим образом:

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

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

Это скроет все дочерние элементы внутри div с идентификатором toc , но !important; display директива для h s будет игнорировать это.

Ответ №3:

Вы можете использовать этот код:

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

Смотрите пример работы здесь: http://jsfiddle.net/mikhailov/AdsbA/1 /