js中如何选择同一级别的元素,但不是兄弟元素

JavaScript018

js中如何选择同一级别的元素,但不是兄弟元素,第1张

我的思路是:

var rank = $(elem).parents().length // 获取元素等级

var sibling = $("body >* >* …… >*")// 获取同级元素,星号的数量应该等于 rank - 2

大概思路就是这样了,具体的还需要你自己研究研究。

/**

* 说明:通过 “父子树” 访问场景内的对象

* 操作:无,查看log信息

* 教程:ThingJS 教程——>园区与层级——>场景层级

* 难度:★★☆☆☆

*/

var app = new THING.App({

url: 'https://www.thingjs.com/static/models/storehouse'

})

// 加载场景后执行

app.on('load', function (ev) {

// 获取园区对象

var campus = ev.campus

// 通过场景的 父子树 访问对象

var children = campus.children

for (var i = 0i <children.lengthi++) {

var child = children[i]

var id = child.id

var name = child.name

var type = child.type

console.log('id: ' + id + ' name: ' + name + ' type: ' + type)

}

// id 107 为白色厂区建筑,

// parent: app.query('107')[0] 为在厂区内创建物体

// 厂区内创建的物体,只有在进入厂区后才会能显示,点击厂区进入,则看到绿色小车

// 当推出厂区后,绿色小车则隐藏

var obj = app.create({

type: 'Thing',

id: 'No1234567',

name: 'truck',

parent: app.query('107')[0],

url: 'https://model.3dmomoda.com/models/8CF6171F7EE046968B16E10181E8D941/0/gltf/', // 模型地址

position: [0, 0, 0], // 世界坐标系下的位置

complete: function (ev) {

//物体创建成功以后执行函数

console.log('thing created: ' + ev.object.id)

}

})

var campus = ev.campus

console.log('after load ' + campus.id)

// 切换层级到园区

app.level.change(campus)

})

jquery中同级元素即兄弟元素用siblings()获取,子级元素用children()获取,所以可以使用如下代码取同级元素的子级:

$('selector').siblings().children()

示例代码:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>TEST</title>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>

div{padding:10pxmargin:10px}

div.xiyouji{width:250pxheight:200pxborder:4px solid green}

div.sun-niu{border:4px solid red}

div.sun-niu div{border:2px solid blue}

</style>

<script>

$(function(){

$("div.sun-niu").click(function() {

nephew = $(this).siblings().children().text()

if(nephew)

option = nephew

else

option = "没有侄子"

alert(option)

})

})

</script>

</head>

<body>

<div class="xiyouji">

<div class="sun-niu">

孙悟空

</div>

<div class="sun-niu">

牛魔王

<div>红孩儿</div>

</div>

</div>

</body>

</html>

显示效果:

点击孙悟空后,就显示了同级的子级元素,也就是他侄子红孩儿。