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

JavaScript013

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

我的思路是：

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

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

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

一般常用的两种是ng-style跟ng-class

1、ng-style

ng-style 指令为 HTML 元素添加 style 属性。

ng-style 属性值必须是对象，表达式返回的也是对象。

对象由 CSS 属性和值组成，即 key=>value 对。

例如：

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-style="myObj">菜鸟教程</h1>

<script>

var app = angular.module("myApp", [])

app.controller("myCtrl", function($scope) {

$scope.myObj = {

"color" : "white",

"background-color" : "coral",

"font-size" : "60px",

"padding" : "50px"

}

})

</script>

</body>

2、ng-class

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

ng-class 指令的值可以是字符串，对象，或一个数组。

如果是字符串，多个类名使用空格分隔。

如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。

如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

例如：

<select ng-model="home">

<option value="sky">Sky</option>

<option value="tomato">Tomato</option>

</select>

<div ng-class="home">

<h1>Welcome Home!</h1>

<p>I like it!</p>

</div>

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>

显示效果：

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