如何使 jQuery 的“过滤器”功能对 SVG 节点正常工作？答案

【问题标题】：How to make jQuery's 'filter' function work correctly for SVG nodes?如何使 jQuery 的“过滤器”功能对 SVG 节点正常工作？
【发布时间】：2011-10-03 12:38:41
【问题描述】：

假设我有以下 SVG 和 jQuery：

<g id="test">
    <rect>
    <text>demo</text>
</g>

$('#test').filter('text').each(function(){
    // do something
});

过滤器功能不适用于 SVG，可能是因为 jQuery 是为 DOM 操作而设计的，而不是命名空间的 SVG。

但是如何调整 jQuery 的过滤功能以正确接受 SVG？

Sizzle.filter = function( expr, set, inplace, not ) {
    var match, anyFound,
        old = expr,
        result = [],
        curLoop = set,
        isXMLFilter = set && set[0] && Sizzle.isXML( set[0] );

    while ( expr && set.length ) {
        for ( var type in Expr.filter ) {
            if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) {
                var found, item,
                    filter = Expr.filter[ type ],
                    left = match[1];

                anyFound = false;

                match.splice(1,1);

                if ( left.substr( left.length - 1 ) === "\\" ) {
                    continue;
                }

                if ( curLoop === result ) {
                    result = [];
                }

                if ( Expr.preFilter[ type ] ) {
                    match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not, isXMLFilter );

                    if ( !match ) {
                        anyFound = found = true;

                    } else if ( match === true ) {
                        continue;
                    }
                }

                if ( match ) {
                    for ( var i = 0; (item = curLoop[i]) != null; i++ ) {
                        if ( item ) {
                            found = filter( item, match, i, curLoop );
                            var pass = not ^ !!found;

                            if ( inplace && found != null ) {
                                if ( pass ) {
                                    anyFound = true;

                                } else {
                                    curLoop[i] = false;
                                }

                            } else if ( pass ) {
                                result.push( item );
                                anyFound = true;
                            }
                        }
                    }
                }

                if ( found !== undefined ) {
                    if ( !inplace ) {
                        curLoop = result;
                    }

                    expr = expr.replace( Expr.match[ type ], "" );

                    if ( !anyFound ) {
                        return [];
                    }

                    break;
                }
            }
        }

        // Improper expression
        if ( expr === old ) {
            if ( anyFound == null ) {
                Sizzle.error( expr );

            } else {
                break;
            }
        }

        old = expr;
    }

    return curLoop;
};

【问题讨论】：

顺便说一句，问题可能出在 jQuery 核心的其他地方，但有时非常复杂。

标签： jquery filter svg sizzle

【解决方案1】：

我认为你不需要改变jQuery源，你可以使用其他兼容XML的遍历方法。

// This works
$("#test").find("text").each(function() {
    // do something
});

同时保留当前元素：

var svg = $("#test");
svg.find( "text" ).add( svg ).each(function() {
    // do something
});

或：

var svg = $("#test");
svg.find( "text" ).andSelf().each(function() {
    // do something
});

希望对您有所帮助。干杯！

【讨论】：

'find' 函数不包括当前元素，只包括它的后代。我需要包括当前元素以及后代。
啊，在这种情况下，您可以使用 andSelf() 或 add()。以上编辑。

【解决方案2】：

SVG 节点在 jQuery 选择器中工作正常。问题在于 $('#test').filter('text') 的意思是“给我所有 ID 为 test 的节点，它们也是文本节点。” p>

正如基根所说，您正在寻找 find() 函数，而不是 filter() 函数。

【讨论】：

谢谢你们。这帮助很大。