获取jQuery中最上层的子孙后代 [英] Get most upper descendant descendant(s) in jQuery

问题描述

从 page = $（＃page）我想获得所有指定的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> 
  

EDIT 我更新了标记以清楚指定我的意思。

一个解决方案是使用：not（svg svg），我发现丑陋和性能很重。 >

解决方案

更新问题后

是

  $（'＃page svg：not（：has（svg））'）; 
  

和您自己的

  $（'＃page svg：not（svg svg）'）; 
  

性能方面（检查测试）他们大致相同，没有明确的胜出者

---

原始答案

对于特定示例

  $（'＃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 ？
 
 
 
 $ c>> 版本， $（'＃page svg：first'）版本将返回＃svg-1  
 
From page=$("#page") I want to get all the specified SVGs but not the subsequent inner ones.
<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>
EDIT I've updated the markup to clearly specify what I mean.

One solution is to use :not(svg svg) which i find ugly and performance heavy.
解决方案
After updated question

The only solutions are
$('#page svg:not(:has(svg))');
and your own
$('#page svg:not(svg svg)');
Performance-wise (check out the test) they are about the same with no clear winner



original answer

For the particular example 
$('#page > svg:first')
or
$('#page svg:first')
will suffice.



But consider the following case
<div id="page">
   <div>
     <p>
        <svg id="svg-1"></svg>
     </p>
     <svg id="svg-2"></svg>
   </div>
</div>
Is this case possible (both svgs wrapped in something else) ? and if so, do you want #svg-2 ?

This case is not handled by the > version at all, and the$('#page svg:first') version will return the #svg-1

                        
这篇关于获取jQuery中最上层的子孙后代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！