在jquery的选择根元素(selecting root element in jquery)

2019-09-02 15:51发布

我需要能够选择从一个片段根元素不知道的节点类型,类,ID或层次结构。

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

我希望能够像做$(“:根”),并在例如选择高于0有。

更妙的是,我宁愿$(':level(0)')这意味着与上面相同, $(':level(1)')将选择0A,0B和0C和$(':level(1)>div')会选择A01。

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

Answer 1:

虽然这个问题是完全正确前一阵子回答-我只是想尝试这个自己,并没有使用像选择过于热衷*:not(* *) -由于可能的开销为主。 我不知道这是否是最近才加入jQuery的能力(我用1.8),但你可以使用:

$(':eq(0)');

这将选择第一个发现的非textnode元素,所以,除非你是遍历DOM在它的形成是非法的,你应该总是让根元素。 这也是高度优化因为jQuery应该知道找到的第一个元素之后停止。

所以这里有一个小东西所有这些WSOD球迷在那里:

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

哦,以防万一不是很明显,上面的代码片段只是说明了选择,你会发现自己与部分片段(而不是完整的文档)的工作,那么你应该使用jQuery的过滤方法,使用这个选择:

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

然而,随着碎片的工作时,你可以做到以下几点:

$(fragment).get(0);

虽然记住, .get(0)可以选择文本/注释节点,如果他们是你的文档中的第一项,而过滤器的方法总是会找到第一个实际元素。



Answer 2:

OK,所以你需要做的是(假设你正在使用你已经得到了样品)以下的,如果你想找到使用jQuery顶级节点如下:

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

你是从字面上询问这里是不属于其它节点的所有子节点。 问题是,对于一个HTML文档,这将永远给你只有html元素,这不是特别有用。 所以,如果你想找到一个html文件的正文中最高级别的元素,你会使用的东西容易得多了:

 $('body > *');

如果你当时就想第二个层次,你只是去

 $('body > * > *');

但是,假设你有某种任意文档结构(如FOO一个你提到),你可以做的是使用第一个例子中找到第一个层次:

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

然后为第二电平

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

并为第三级

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

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

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

等等,与格取代*。 真的不知道为什么你会想这样做,但它会奏效。 问题是,这个问题并没有真正提供足够的背景下我们给你一个更好的选择。



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:

我可能误解的问题,而是根本假设你的意思在其中,家长是不同的标签给孩子那么下面应该工作点。

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

    return element;
}

直到它找到一个父母是不同的标签,然后返回该项这基本上走到树。 对于你的榜样,这将意味着,如果你的元素是在一个,或不管它会检测到它的根,并将其返回。

这个制作一个自定义的jQuery选择应该是可能的太多,但显然更为复杂。

这也应该是很容易扩展,以采取定义级别的整数。 所有你需要做的就是走在树到指定的深度,一旦你已经找到了根,并返回这些元素。



Answer 7:

你可以考虑使用父()和儿童()函数。 是你需要去多层次的,你可以把它们连像这样。

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

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



Answer 8:

我得到的HTML片段从Ajax调用,并且我还需要从它那里得到根本股利。 我所做的就是简单的调用$(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 > *')


文章来源: selecting root element in jquery