FIDDLE

Question

<div data-id="123">123</div>
<div data-id="120" data-parent="123">120</div>
<div data-id="115" data-parent="123">115</div>


<div data-id="240">240</div>
<div data-id="245" data-parent="240">245</div>
<div data-id="246" data-parent="240">246</div>
<div data-id="247" data-parent="240">247</div>


<div data-id="255" data-parent="245">255</div>
<div data-id="256" data-parent="245">256</div>

我们在树上方使用了两个属性：

data-id
data-parent

因此，未通过$().parent()或$().children()

然而，

$.fn.treeChildren=function(){
   return $('div[data-parent='+$(this).attr('data-id')+']');
}

然后：

$('[data-id=240]').treeChildren() // [245,246,247]

问题：

此插件仅检索孩子，而不是孩子，＆gt;孩子的孩子......等等。

如何让所有孙子 $('[data-id=240]').treeChildren()的预期结果[245,246,247,255,256]不仅[245,246,247]

知道以下算法不起作用：

$.fn.treeGrChildren=function(){
   if($('div[data-parent='+$(this).attr('data-id')+']').treeChildren().length){
      return $('div[data-parent='+$(this).attr('data-id')+']').treeGrChildren();
   }else{
      return $('div[data-parent='+$(this).attr('data-id')+']');
    }
}

FIDDLE

Answer 1

希望我能正确理解这个问题。使用

$('...').find('div')

将为您提供所有子女和孙子女的公寓名单。然后，您可以提取所需的数据。

Answer 2

您的代码仅检索具有以下内容的div：data-parent="240" 像这样改变这两行：

<div data-id="255" data-parent="240">255</div>
<div data-id="256" data-parent="240">256</div>

http://jsfiddle.net/xabgazk3/1/

或类似的东西：

$('#results').append( $('[data-id=240]').treeChildren().clone())
$('#results').append( $('[data-id=245]').treeChildren().clone())

http://jsfiddle.net/xabgazk3/2/

截至目前，您的HTML代码中没有儿童或父母。 Children（）遍历DOM树中的单个级别。要遍历多个级别（返回孙子或其他后代），请使用find（）方法。

Answer 3

解决方案是将此树保存在Javascript对象

中

function MyTreeNode(id,parent){
   this.data=id;
   this.parent=parent;
   this.parent.children.push(this);
    this.children=this.children || [];
}

然后，通过为MyTreeNode实现一个方法来获取所有的孙子。

即：

MyTreeNode.prototype.grandChildren=function(){
   // return children of this.children recursively 
}

所以，如果我想要所有div#240的孙子女孩：

调用以下内容获取孙子的CSS选择器

var selectorsGrandCh=node240.grandChildren().map(function(child){return 'div[data-id='+child.data+']'}).join(',') ;

然后使用jquery：$(selectorsGrandCh)

根据属性的递归连接获得所有孙子孙女

问题：

FIDDLE

3 个答案: