2015-07-05 4 views
3

Я разрабатываю расширение Chrome и пытаюсь скрыть часть страницы. Я довольно новичок в этом материале, поэтому извиняюсь заранее, если я использую неправильные термины или вопрос кажется очевидным!Скрытие текста с помощью Javascript/JQuery

Формат страницы отображается, как показано ниже:

<div class="wrapper"> 
    <span class="loud" style="text-decoration: none;">...</span> 
    <div class="leave-gap">...</div> 
    <quote>...</quote> 
    "*** I can't figure how to hide this ***" 
    <p></p> 
    <span id="id_12345" class="none">...</span> 
    <div class="block-footer">...</div> 
    <div class="leave-gap">...</div> 
</div> 

Как видно из фрагмента, я не могу понять, как скрыть немного подсвечены звездами.

У меня есть функция, которая принимает в качестве входных данных переменной, которая является первым элементом в классе «обертка»:

function processComment(commentStart) 
{ 
    $element = commentStart; 

    while($element) 
    { 
     if(some condition) 
     { 
      $element.hide(); 
     } 
     $element.next(); 
    } 

Поскольку этот текст сидит сам по себе вне каких-либо тегов, он не взял , Я не могу просто скрыть весь класс-оболочку, потому что в нем есть несколько бит, которые мне нужно показать.

Любые предложения с благодарностью получены.

Спасибо, Richard

+1

Спасибо за все ваши ответы. Мне нравится элегантность решения Пранава. – Richard

ответ

1

Установить видимость или обертывание как обрушение и установить видимость детей на видимые для переопределения видимости. Это будет только скрывать текстовый узел.

$('.wrapper').css('visibility', 'collapse').find('*').css('visibility', 'visible');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <span class="loud" style="text-decoration: none;">...</span> 
 
    <div class="leave-gap">...</div> 
 
    <quote>...</quote> 
 
    "*** I can't figure how to hide this ***" 
 
    <p></p> 
 
    <span id="id_12345" class="none">...</span> 
 
    <div class="block-footer">...</div> 
 
    <div class="leave-gap">...</div> 
 
</div>

+0

Спасибо, Пранав. Это аккуратное решение. В моем случае я мог бы написать: – Richard

+1

$ element.parent(). Css ('visibility', 'collapse'). Find ('*'). Css ('видимость', 'visible'); – Richard

+0

@ Рихард: рад помочь :) –

0

Лучше может быть, чтобы поместить содержимое, которое скрыто в пролете своих собственных.

+1

Спасибо Тозеру, я не контролирую формат содержания, но ваше предложение будет работать, если я это сделаю. – Richard

0

Если я правильно понимаю, ваш if (some condition) расценивает содержание текста само по себе, так что это регулярное выражение вещи или что-то подобное.

Так что вы можете сделать, разместив вовлеченную часть текста, оберните ее между <span> тегами: тогда вы можете обратиться к этому элементу <span> обычным способом.

Это может выглядеть следующим образом (здесь предполагается, что ваш мета-пример означает $element s последовательные слова):

function processComment(comment) { 
    // (comment is supposed to be the HTML element to process) 
    var words = $(comment).html().split(' '); 
    for (var i in words) { 
     var word = words|i]; 
     if(some condition on word) { 
      words[i] = '<span class="hidden-word">' + word + '</span>'; 
     } 
    } 
    $(comment).html(words.join(' ')); 
} 
Смежные вопросы