使用Javascript / JQuery隐藏文本

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>

如代码片段所示，我无法弄清楚如何隐藏带星号的位。

我有一个函数，它以“包装器”类中的第一个元素作为输入变量：

function processComment(commentStart)
{
    $element = commentStart;

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

因为这段文字独立于任何标签之外，所以它没有被捕捉到。我不能仅仅隐藏整个包装类(wrapper class)，因为其中有一些我需要展示的部分。

非常感谢您的建议。

谢谢， Richard

- Richard

---

感谢大家的回复。我喜欢Pranav解决方案的优雅。 - Richard

Answer 1

将可见性属性或包装器设置为collapse，并将子元素的可见性设置为visible，以覆盖可见性属性。这样只会隐藏文本节点。

$('.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>

- Pranav C Balan

---

谢谢Pranav。这是一个不错的解决方案。在我的情况下，我可以写： - Richard

$element.parent().css('visibility', 'collapse').find('*').css('visibility', 'visible'); $element.parent().css('visibility', 'collapse').find('*').css('visibility', 'visible'); - Richard

@Richard：很高兴能帮忙 :) - Pranav C Balan

Answer 2

你最好的选择可能是将你想要隐藏的内容放入一个独立的 span 中。

- tozer83

---

感谢你的建议，Tozer。虽然我无法控制内容的格式，但如果我能够控制的话，你的建议是可行的。 - Richard

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

- cFreed