Question

寻找一些帮助，如果你知道怎么做可能并不困难。不幸的是，我对jQuery/JavaScript完全不熟悉，我不知道如何做到这一点，所以如果有人能指出我正确的方向，那就太棒了！

我正在使用第三方Google地图组件的Joomla网站上工作。很酷的组件，但我想隐藏一个特定的标签。通常情况下，我只是用CSS隐藏这个元素，但由于这个特殊的div没有任何“ID”或“Class”，我认为我不能直接用CSS来定位它。

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

我认为这样的事情可以解决问题：

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

然而，由于我的知识有限，我很挣扎，我不确定它是否与我正在使用的jQuery代码相关，或者因为我只是把它放在错误的地方或其他我做错了。 .. （继续得到“

未捕获的TypeError：无法读取null
的属性“parent”

“）

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

<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地图组件的实际示例。 http://83.84.140.23:8888/joomla/index.php/contact

我基本上试图隐藏在打开页面时声明“Gabbon”的“文字气球”......（在底部的地图中）

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

非常感谢提前！

Answer 1

Uncaught TypeError: Cannot read property 'parent' of null

This happens because you use the short $ sign for jQuery functions.

In your case you need to use:

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

For more details see noconflict

In your case, the element is created after the document is loaded, so you need the MutationObserver api to listen for availabilityof the new element.

Thanks to Mutation_events you can write:

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

Moreover, referring to this article or others a different approach is:

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

用类隐藏子级的父div

1 个答案: