Question

从page=$("#page")我想获得所有指定的SVG，但不是后续的内部SVG。

<div id="page">
    <div ...>
        <svg> /* THIS ONE */
            <rect ...>
            <circle ...>
            <svg> /* NOT THIS ONE */
                <foo> ... </foo>
            </svg>
        </svg>
    </div>
    <div ...>
        <div ...>
            <svg> /* THIS ONE */
                <rect ...>
                <circle ...>
                <svg> /* NOT THIS ONE */
                    <foo> ... </foo>
                </svg>
            </svg>
        </div>
   </div>
</div>

编辑我已更新标记，以明确说明我的意思。

一种解决方案是使用:not(svg svg)，我发现它很难看并且表现很重。

Answer 1

更新后的问题

唯一的解决方案是

$('#page svg:not(:has(svg))');

和你自己的

$('#page svg:not(svg svg)');

表现方面（check out the test）他们差不多没有明显的赢家

原始回答

对于特定示例

$('#page > svg:first')

或

$('#page svg:first')

就足够了。

但请考虑以下案例

<div id="page">
   <div>
     <p>
        <svg id="svg-1"></svg>
     </p>
     <svg id="svg-2"></svg>
   </div>
</div>

这种情况是否可行（两个svgs包裹在别的东西）？如果是的话，你想要#svg-2吗？

>版本根本不处理此案例，$('#page svg:first')版本将返回#svg-1

Answer 2

您可以使用以下内容：

$(page).children(svg).first()

哪个会让你获得第一个svg，在这种情况下是最外面的svg，但如果这是你关心的一部分，那么它可能仍会表现很重。

Answer 3

如果您知道它总是会有<div>个父级，那么您可以这样做（这样可以避免知道#page和div之间有多少个元素）：

#page div>svg

Answer 4

只需使用>获得第一个子级别。

#page > svg

在jQuery中获取大多数上层后代的后代

4 个答案: