在jquery中选择根元素

我需要能够在不知道节点类型,类,id或层次结构的情况下从片段中选择根元素。

我希望能够执行类似$(’:root’)的操作,并在上面的示例中选择0。

更好的是我更喜欢$(':level(0)') ,这意味着与上面相同, $(':level(1)')将选择0a,0b和0c以及$(':level(1)>div')会选择a01。

关于如何巧妙地做到这一点的任何想法?

虽然这个问题在很久以前就得到了很好的回答 – 我只是想尝试自己尝试,并且不太热衷于使用像*:not(* *)这样的选择器 – 主要是因为可能的开销。 我不知道这是否是jQuery的最新function(我使用的是1.8),但你可以使用:

 $(':eq(0)'); 

这将选择第一个找到的非textnode元素,因此除非你正在遍历的dom在它的形成中是非法的,否则你应该总是得到根元素。 它也是非常优化的,因为jQuery应该知道在找到第一个元素后停止。

所以这里有一些适合所有WSOD粉丝的东西:

 $(':eq(0)').remove(); 

哦,以防万一上面的代码片段只是说明选择器并且你发现自己处理部分片段(而不是完整的文档)并不明显,那么你应该使用这个选择器和jQuery的filter方法:

 $(fragment).filter(':eq(0)'); 

但是,使用片段时,您可以执行以下操作:

 $(fragment).get(0); 

虽然请记住.get(0)可以选择文本/注释节点,如果它们是文档中的第一个项目,而filter方法将始终找到第一个实际元素。

好的,所以您需要做的是以下(假设您正在使用您已经获得的样本),如果您想使用jquery找到顶级节点,请执行以下操作:

  $('*:not(* *)'); 

你在这里要求的是所有不是其他节点子节点的节点。 问题是对于html文档,这将始终只给你html元素,这不是特别有用。 所以,如果你想在html文档的主体中找到顶级元素,你可以使用更简单的东西:

  $('body > *'); 

如果你想要第二级,你就去吧

  $('body > * > *'); 

但是,假设你有某种任意的文档结构(比如你提到的foo),你可以做的是使用第一个例子来找到第一个级别:

  $('*:not(* *)'); 

然后是第二级

  $('*:not(* *)').find('> *'); 

而对于第三级

  $('*:not(* *)').find('> * > *'); 

等等等等。 如果你正在寻找一个根div元素(假设你的样本就像问题),你可以这样做:

  $('div:not(div div)'); 

等等,用div替换*。 不确定你为什么要这样做,但它会起作用。 问题是这个问题并没有真正为我们提供足够的背景来为您提供更好的选择。

我更像是一个原型人,但我认为你可以获得所有节点然后获得数组中的第一个节点:

 $('*')[0] 

然后得到那些子项(0a,0b和0c)

 $('*')[0].children() 

如果你有你的元素作为jQuery片段,如:

 var myElements = $('
');

然后你可以找到第一个元素:

 myElements.filter(":first") 

filter函数从片段的根元素查看。

不需要jQuery ……

 var root = document.firstChild; 

我可能误解了这个问题,但是从root开始,你的意思是父母对孩子的标签不同,那么以下内容应该有效。

 function GetRoot(element) { while(element.parent().attr("tagName") == element.attr("tagName")) { element = element.parent(); } return element; } 

这基本上会向上走树,直到它找到一个不同标记的父项,然后返回该项。 对于你的例子,这意味着如果你的元素在a,或者它将检测到它作为根并返回它。

使用它制作自定义jquery选择器也应该是可能的,但显然更复杂。

扩展它以使用定义级别的整数也应该相当容易。 一旦找到根并返回这些元素,您所需要做的就是沿树向下走到指定的深度。

你可以考虑使用parent()和children()函数。 你需要多层次,你可以像这样链接它们。

 $("#a01").parent().parent() //returns 

请看我的评论,我会尝试提供更好的解决方案。

我从ajax调用获取html片段,我还需要从中获取root div。 我所做的只是调用$(data) ,jQuery会将返回的文本解析为HTML并为您提供根。

 $.ajax path, type: 'GET' contentType: 'application/x-www-form-urlencoded;charset=UTF-8' success: (data) -> $(data) 

如果你想选择一个元素的顶级父级但仍然在主体之下,我会去

 $(obj).parents().filter('body > *')