Question

我需要能够从片段中选择根元素，而不需要知道节点类型，类，id或层次结构。

<div id="0">
    <div id="0a">
        <div id="a01"></div>
    </div>
    <div id="0b">
    </div>
    <div id="0c">
    </div>
</div>

我希望能够执行类似$（'：root'）的操作，并在上面的示例中选择0。

更好的是，我希望$(':level(0)')与上述相同，$(':level(1)')会选择0a，0b和0c而$(':level(1)>div')会选择a01。

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

Answer 1

好的，所以您需要做的是以下（假设您使用的是您正在使用的示例），如果您想使用jquery找到顶级节点，请执行以下操作：

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

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

 $('body > *');

如果你想要第二级，你就去

 $('body > * > *');

但是，假设你有某种任意的文档结构（比如你提到的foo），你可以做的是使用第一个例子来找到第一级：

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

然后是第二级

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

和第三级

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

依此类推。如果你正在寻找一个根div元素（假设你的样本就像问题那样），你可以这样做：

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

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

Answer 2

虽然这个问题在一段时间之前得到了完全正确的回答 - 我只是试图自己尝试这个问题并且不太热衷于使用像*:not(* *)这样的选择器 - 主要是因为可能的开销。我不知道这是否是jQuery的能力（我使用1.8）的最新成员，但你可以使用：

$(':eq(0)');

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

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

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

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

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

但是，使用片段时，您可以执行以下操作：

$(fragment).get(0);

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

Answer 3

我更像是一个原型人，但我认为你可以获得所有节点然后获得阵列中的第一个节点：

$('*')[0]

然后获取其中的子项（0a，0b和0c）

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

Answer 4

如果你把你的元素作为jQuery片段，如：

var myElements = $('<div id="0">
<div id="0a">
    <div id="a01"></div>
</div>
<div id="0b">
</div>
<div id="0c">
</div>
</div>');

然后你可以通过以下方式找到第一个元素：

myElements.filter(":first")

过滤器功能从片段的根元素开始。

Answer 5

不需要jQuery ......

var root = document.firstChild;

Answer 6

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

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

    return element;
}

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

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

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

Answer 7

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

$("#a01").parent().parent()  //returns <div id="0">

请参阅我的评论，我会尝试提供更好的解决方案。

Answer 8

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

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

Answer 9

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

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

在jquery中选择根元素

9 个答案: