javascript - 隐藏子级的父级 div

Question

寻求一些帮助，如果您知道如何做，这可能并不难。不幸的是，我是 jQuery/JavaScript 的新手，我不知道该怎么做，所以如果有人能给我指出正确的方向，那就太好了!

我正在使用第 3 方 Google map 组件开发 Joomla 网站。很棒的组件，但我想隐藏 1 个特定标签。通常我会简单地用 CSS 隐藏这个元素，但由于这个特定的 div 没有任何“ID”或“类”，我认为我不能直接用 CSS 定位它。

我注意到我试图隐藏的 div 的 child 确实有一个独特的类，所以我正在寻找一个解决方案，通过使用 child 的类名，我可以隐藏它的父级。

我认为像这样的东西可以解决问题:

$('.gm-style-iw').parent().hide();

然而，以我有限的知识，我遇到了困难，我不确定它是否与我使用的 jQuery 代码有关，或者因为我只是把它放在了错误的地方或者我做错了什么。 ..(不断得到“

Uncaught TypeError: Cannot read property 'parent' of null

")

一些背景。这或多或少是代码的特定部分的样子；

<div style="cursor: default; position: absolute; left: 234px; top: 86px; z-index: 86;">
    <div class="gm-style-iw" style="top: 9px; position: absolute;">

我正在寻找一种方法来隐藏 'div class="gm-style-iw"' 上方的 'div'

这是 Google map 组件的一个实例。 http://83.84.140.23:8888/joomla/index.php/contact

我基本上是想隐藏打开页面时显示“Gabbon”的“文本气球”...(在底部的 map 中)

任何人都可以指出如何隐藏它的正确方向？

非常感谢!

Answer 1

Uncaught TypeError: Cannot read property 'parent' of null

发生这种情况是因为您对 jQuery 函数使用了短 $ 符号。

在您的情况下，您需要使用:

jQuery('.gm-style-iw').parent().hide();

有关详细信息，请参阅 noconflict

在您的例子中，元素是在文档加载后创建的，因此您需要 MutationObserver用于监听新元素可用性的 API。

感谢Mutation_events你可以这样写:

<script>
    jQuery('#map').on('DOMNodeInserted', '.gm-style-iw', function(e) {
        jQuery('.gm-style-iw').parent().hide();
    })
</script>

此外，引用this article或其他不同的方法是:

<script>
(function(win){
    'use strict';

    var listeners = [],
            doc = win.document,
            MutationObserver = win.MutationObserver || win.WebKitMutationObserver,
            observer;

    function ready(selector, fn){
        // Store the selector and callback to be monitored
        listeners.push({
            selector: selector,
            fn: fn
        });
        if(!observer){
            // Watch for changes in the document
            observer = new MutationObserver(check);
            observer.observe(doc.documentElement, {
                childList: true,
                subtree: true
            });
        }
        // Check if the element is currently in the DOM
        check();
    }

    function check(){
        // Check the DOM for elements matching a stored selector
        for(var i = 0, len = listeners.length, listener, elements; i < len; i++){
            listener = listeners[i];
            // Query for elements matching the specified selector
            elements = doc.querySelectorAll(listener.selector);
            for(var j = 0, jLen = elements.length, element; j < jLen; j++){
                element = elements[j];
                // Make sure the callback isn't invoked with the
                // same element more than once
                if(!element.ready){
                    element.ready = true;
                    // Invoke the callback with the element
                    listener.fn.call(element, element);
                }
            }
        }
    }

    // Expose `ready`
    win.ready = ready;

})(this);

ready('.gm-style-iw', function(element) {
    this.parentNode.style.display = 'none';
}) </script>