Question

我是初学者。我试图隐藏一个由第三方JavaScript动态添加到页面的div，用于审美目的。

问题是div没有id属性;这有可能吗？ div是否根据它们加载的顺序具有任何固有属性？或者有什么方法可以搜索一串文本并隐藏元素吗？

例如，根据文字<div>happy New year</div>删除happy New year。

Answer 1

您可以先选择相关元素并迭代它们，直到找到所需内容。

在JQuery中可以这样做：

// select relevant elements
var elements = $('div');

// go through the elements and find the one with the value
elements.each(function(index, domElement) {
    var $element = $(domElement);

    // does the element have the text we're looking for?
    if ($element.text() === "happy New year") {
        $element.hide();
            // hide the element with jQuery
        return false; 
            // jump out of the each
    }
});

请注意，代码有点脆弱，完全取决于元素的内容。以下是相关的JQuery api文档：

Selectors in jQuery（$(...)）
jQuery.each() - 用于浏览jquery对象数组
jQuery.text() - 获取价值（浏览器之间存在较小但明显的差异，如何在普通javascript中执行此操作）
jQuery.hide() - 用于隐藏CSS样式display: none

请注意，您可以根据自己的选择更具体地说明您有以下代码：

<div class="message">
    <div>happy New year<div>
</div>

您可以选择以下元素：

var domElement = $('.message div')[0]; // hopefully it only happens once

Answer 2

我以为我会提供一个简单的JavaScript替代方案，可以改进（相当多），特别是将布尔语作为字符串传递（感觉很可怕）：

function hideByText(text, opts) {
    if (!text) {
        return false;
    }
    else {
        var defaults = {
            // the element we look within, expects:
            // 1: node reference, eg the result of: document.getElementsByTagName('div')[0]
            // 2: an element's id, as a string, eg: 'test'
            'within': document.body,
            // the element type, eg 'div', 'span', 'p', defaults to *everything*
            'elemType': '*',
            // case-sensitivity, as a string:
            // 'true' : is case sensitive, 'Some' will not match 'some',
            // 'false' : is case insensitive, 'Some' will match 'some'
            'sensitive': 'true',
            // 'absolute' : 'some text' will not match 'some text.'
            // 'partial' : 'some text' will match 'some text.'
            'match': 'absolute',
            // 'true' : removes white-space from beginning, and end, of the text,
            // 'false' : does not remove white-space
            'trim': 'true',
            // the class to add to elements if a match is made,
            // use CSS to hide, or style, the matched elements
            'matchedClass': 'hasText'
        },
            opts = opts || {};

        for (var setting in defaults) {
            if (defaults.hasOwnProperty(setting)) {
                opts[setting] = opts[setting] || defaults[setting];
            }
        }

        var within = opts.within.nodeType == 1 ? opts.within : document.getElementById(opts.within),
            elems = within.getElementsByTagName(opts.elemType),
            flags = opts.sensitive == 'true' ? 'i' : '',
            needle = opts.trim == 'true' ? text.replace(/^(\s+) || (\s+)$/g, '') : text,
            haystack,
            reg = new RegExp(needle, flags);

        if (opts.match == 'absolute') {
            for (var i = 0, len = elems.length; i < len; i++) {
                if ((elems[i].textContent || elems[i].innerText) == text) {
                    elems[i].className = opts.matchedClass;
                }
            }
        }
        else if (opts.match == 'partial') {
            for (var i = 0, len = elems.length; i < len; i++) {
                if ((elems[i].textContent || elems[i].innerText).match(reg)) {
                    elems[i].className = opts.matchedClass;
                }
            }
        }
    }
}

hideByText('some text', {
    'match': 'partial',
    'sensitive': 'true',
    'elemType': 'p',
    'matchedClass' : 'hasText'
});

JS Fiddle demo

Answer 3

previous answer将根据组合的文本内容（see .text() behavior）隐藏节点。以下测试用例将说明这一点：

should stay: <div><em>happy New year</em></div><br>
should stay: <div>happy New years</div><br>
should stay: <div>happy New <em>year</em></div><br>
should stay: <div>Something else entirely</div><br>
should hide: <div>happy New year</div>

此处显示：jsFiddle

根据您的情况的详细信息，这种更一般的行为可能是您想要的，因为它将忽略后代结构并且仅匹配组合文本。但是，如果您需要隐藏专门包含文本的<div>，则以下内容将仅隐藏测试用例中的最后一个<div>：

var tx = 'happy New year';
$('div:contains(' + tx + ')').filter(function(){
    var $content = $(this).contents();
    return $content.length === 1 && 
        $content[0].nodeType === 3 &&
        $content.text() === tx;
}).hide();

此处显示：jsFiddle

可以修改初始选择器以隐藏包含特定文本的任何内容。这种更通用的方法将隐藏第一种情况下的<em>元素和最后一种情况下的<div>元素：

$(':contains(' + tx + ')').filter(// etc...

您可以考虑removing the element from the DOM而不是仅隐藏它。

:contains() jQuery selector

.filter() jQuery method

.contents() jQuery method

nodeType Node property

.remove() jQuery method

Answer 4

您实际上可以使用一行

来完成

$("div").text("happy New year").hide();

如何使用JavaScript隐藏基于文本的元素？

4 个答案: