7

我需要能够在不知道节点类型、类、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。

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

4

9 回答 9

4

好的，所以您需要做的是以下（假设您使用的是您拥有的示例），如果您想使用 jquery 查找顶级节点如下： 

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

您在这里真正要求的是所有不是其他节点子节点的节点。问题是对于 html 文档，这将始终只为您提供 html 元素，这并不是特别有用。因此，如果您想在 html 文档的正文中查找顶级元素，您可以使用更简单的方法：

 $('body > *');

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

 $('body > * > *');

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

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

然后是第二级

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

对于第三级

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

等等等等。如果您正在寻找一个根 div 元素（假设您的示例与问题类似），您可以这样做：

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

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

于 2009-11-04T11:53:09.650 回答
3

虽然这个问题在不久前得到了完全正确的回答——我只是想自己尝试一下，并不太热衷于使用像这样的选择器*:not(* *)——主要是因为可能的开销。我不知道这是否是 jQuery 能力的最新补充（我使用的是 1.8），但您可以使用：

$(':eq(0)');

这将选择第一个找到的非文本节点元素，因此除非您正在遍历的 dom 在其形成中是非法的，否则您应该始终获取根元素。它也是高度优化的，因为 jQuery 应该知道在找到第一个元素后停止。

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

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

哦，如果上面的代码片段只是说明选择器并不明显，并且您发现自己使用的是部分片段（而不是完整文档），那么您应该将此选择器与 jQuery 的过滤方法一起使用：

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

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

$(fragment).get(0);

尽管请记住，.get(0)如果它们是文档中的第一项，则可以选择文本/评论节点，而过滤器方法将始终找到第一个实际元素。

于 2012-10-06T12:46:30.157 回答
2

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

$('*')[0]

然后获取它的子项（对于 0a、0b 和 0c）

$('*')[0].children()
于 2009-10-30T14:22:48.213 回答
2

如果您将元素作为 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")

过滤器函数从片段的根元素开始查找。

于 2013-08-20T02:24:32.170 回答
1

不需要 jQuery...

var root = document.firstChild;
于 2009-10-30T14:23:39.323 回答
1

我可能误解了这个问题，但假设你的根是指父母与孩子不同的标签，那么以下应该有效。

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

    return element;
}

这基本上会沿着树向上走，直到找到一个不同标签的父级，然后返回该项目。对于您的示例，这意味着如果您的元素位于 , 或其他任何内容中，它将检测到它作为根并返回它。

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

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

于 2009-11-05T13:18:37.880 回答
0

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

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

请看我的评论，我会尽力提供更好的解决方案。

于 2009-10-30T14:23:45.843 回答
0

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

$.ajax path,
  type: 'GET'
  contentType: 'application/x-www-form-urlencoded;charset=UTF-8'
  success: (data) ->
    $(data)
于 2012-12-24T07:23:35.637 回答
0

如果您想选择元素的顶级父级但仍在正文下，我会去

$(obj).parents().filter('body > *')
于 2013-03-16T12:13:54.973 回答