Question

有没有办法检查某个元素的任何父母是否都是标签？目前，它只是检查直接父母，但我想知道是否有办法检查它是否包含在任何ankor标签内？

HTML：

<!DOCTYPE html>
<html>
    <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    </head>
    <body>
        <a class="website">Load Content</a>
        <a href=""><img width="200" height="200" class="zoom" /></a>
        <a href=""><div><img width="78" height="101" class="zoom" /></div></a>
    </body>
</html>

CSS：

.zoomBox {
    position:absolute;  
    opacity:0;
    background: url('http://www.shannonhochkins.com/_images/505706e8965f59080b0016a1') no-repeat center center;    
}

JavaScript的：

zoom = function() {    
zoomBoxClass = 'zoomBox';
zoomContainer = $('.zoom');
zoomContainer.each(function() {
    if ($(this).parent().is("a")) {
        var $el = $('<div class="' + zoomBoxClass + '"></div>').insertBefore($(this)),
            zwid = $(this).width(),
            zhei = $(this).height(),
            zpx = $(this).position().left,
            zpy = $(this).position().top;
        $el.css({
            width: zwid,
            height: zhei,
            top: zpy,
            left: zpx
        });;
    };
});

$(document).ready(function() {
    zoom();
    $("." + zoomBoxClass).mouseover(function() {
        $(this).stop(true, true).animate({
            opacity: 1.0
        }, 'slow');
    });
    $("." + zoomBoxClass).mouseleave(function() {
        $(this).stop(true, true).animate({
            opacity: 0
        }, 'slow');
    });
});

它确实有效，但在击中第二个时却不正确。

我需要能够为页面上存在的每个类单独运行该函数。这可能吗？

Answer 1

您需要使用.each()

zoomContainer.each(function() {
    var zoomBox = $('<div class="zoomBox"></div>').insertBefore($(this));
    // anything else you want to do to zoomBox
});

zoomContainer是jQuery对象的集合，.each()将遍历每个对象，上下文（this）引用循环中的各个zoomContainer jQuery对象。

在您的代码示例的上下文中：

zoom = function() {
    zoomBoxClass = 'zoomBox';
    zoomContainer = $('.zoom');

    zoomContainer.each(function () {
        var $el = $('<div class="' + zoomBoxClass + '"></div>').insertBefore($(this)),
            zwid = $(this).width(),
            zhei = $(this).height(),
            zpx = $(this).position().left,
            zpy = $(this).position().top;

        $el.css({
            width: zwid,
            height: zhei,
            top: zpy,
            left: zpx
        });
    });
};

如果您希望遍历DOM树，直到找到特定标记（如果存在），则可以使用jquery的.closest(selector)

`$(this).closest('a');`

如果您想检查.closest()是否返回了任何内容，您可以检查其长度属性是否为＆gt; 0

var $a = $(this).closest('a');

if ($a.length > 0) {
    // do stuff with $a here
}

在页面上的每个元素上运行函数

1 个答案: