Question

我正在开发Chrome扩展程序并试图隐藏部分页面。我对这些内容相当陌生，所以如果我使用了错误的术语或者问题显而易见，请提前道歉！

页面格式如下所示：

<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>

正如片段所示，我无法弄清楚如何隐藏用星星突出显示的位。

我有一个函数，它接受一个变量，它是类中的第一个元素＆＃34; wrapper＆＃34;：

function processComment(commentStart)
{
    $element = commentStart;

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

因为此文本独立于任何标记之外，所以它不会被拾取。我不能隐藏整个包装类，因为我需要在其中显示一些内容。

感激地收到任何建议。

谢谢，理查德

Answer 1

将可见性或包装器设置为折叠，并将子项的可见性设置为可见的覆盖可见性属性。它只会隐藏文本节点。

＆＃13;

$('.wrapper').css('visibility', 'collapse').find('*').css('visibility', 'visible');

＆＃13;

<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>

＆＃13;

Answer 2

您最好的选择可能是将您想隐藏的内容放入自己的内容中。

Answer 3

如果我完全理解，您的if (some condition)本身就是关于文字内容的，那么它就是一个正则表达式的东西或类似东西。

所以你可以做的是，找到所涉及的文本部分，将其包装在<span>标签之间：然后你可以按常规方式处理这个<span>元素。

它可能看起来像这样（这里假设你的元例子意味着$element是连续的单词）：

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(' '));
}

使用Javascript / JQuery隐藏文本

3 个答案: