Question

我有这个小的javascript来添加一些类到一些超链接，以给他们一个很好的效果。它适用于具有类linkroll的元素内的任何链接。但是，当链接嵌套在某些元素和div中时，它不会应用效果。我发现querySelectorAll不是很一致。

我在想如果我重写这个并使用类似jQuery的each（）函数，我可能会有更好的结果。以下是它现在的样子：

var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined || document.body.style['MozPerspective'] !== undefined;
function linkify() {
    if (supports3DTransforms) {
        var selector = '.linkroll a';
        var nodes = document.querySelectorAll(selector);
        for (var i = 0, len = nodes.length; i < len; i++) {
            var node = nodes[i];
            var sibling = node.nextSibling; // Do not apply to images
            if (sibling.nodeName != "img") {
                if (!node.className || !node.className.match(/roll/g)) {
                    node.className += ' roll';
                    node.innerHTML = '<span data-title="' + node.text + '">' + node.innerHTML + '</span>';
                }
            }
        };
    }
}
linkify();

我怎么可能重写document.querySelectorAll(selector);并改用jQuery的each()呢？

Answer 1

试试这个：

var supports3DTransforms = $('body').css('-webkit-perspective') !== undefined || $('body').css('MozPerspective') !== undefined;

function linkify() {
    if (supports3DTransforms) {
        $('.linkroll a').each(function (i, el) {
            var $el = $(el),
                $sibling = $el.next();
            !$sibling.is('img') && !$el.hasClass('roll') && $el.addClass('roll').wrap('<span data-title="' + $el.text() + '"></span>');
        });
    }
}

linkify();

Example fiddle

将querySelectorAll重写为jQuery

1 个答案: