如何用angularJs得到某一节点的兄弟节点

如何用angularJs得到某一节点的兄弟节点,第1张

$('#id').siblings() 当前元素所有的兄弟节点

$('#id').prev() 当前元素前一个兄弟节点

$('#id').prevaAll() 当前元素之前所有的兄弟节点

$('#id').next() 当前元素之后第一个兄弟节点

$('#id').nextAll() 当前元素之后所有的兄弟节点

这三个方法都可以添加选择器,给出选择条件,就能找到你指定的兄弟节点了。

纯手打,望采纳!

appendChild定义

appendChild(newChild:

Node)

:

Node

Appends

a

node

to

the

childNodes

array

for

the

node.

Supported:

IE

5.0+,

Mozilla

1.0+,

Netscape

6.0+,

Safari

1.0+,

Opera

7.0+

添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中

appendChild用法

target.appendChild(newChild)

newChild作为target的子节点插入最后的一子节点之后

appendChild例子

var

newElement

=

document.Document.createElement('label')

newElement.Element.setAttribute('value',

'Username:')

var

usernameText

=

document.Document.getElementById('username')

usernameText.appendChild(newElement)

insertBefore定义

The

insertBefore()

method

inserts

a

new

child

node

before

an

existing

child

node.

insertBefore()

方法的作用是:在现有的子节点前插入一个新的子节点

insertBefore用法

target.insertBefore(newChild,existingChild)

newChild作为target的子节点插入到existingChild节点之前

existingChild为可选项参数,当为null时其效果与appendChild一样

insertBefore例子

var

oTest

=

document.getElementById("test")

var

newNode

=

document.createElement("p")

newNode.innerHTML

=

"This

is

a

test"

oTest.insertBefore(newNode,oTest.childNodes[0])

好了那么有insertBefore的应该也有insertAfter吧?

好那我们来用Aptana编写一个例子吧,但Aptana的智能提示告诉我其实没有insertAfter这个方法

那么就自己定义一个罗:)

insertAfter定义

function

insertAfter(newEl,

targetEl)

{

var

parentEl

=

targetEl.parentNode

if(parentEl.lastChild

==

targetEl)

{

parentEl.appendChild(newEl)

}else

{

parentEl.insertBefore(newEl,targetEl.nextSibling)

}

}

insertAfter用法与例子

var

txtName

=

document.getElementById("txtName")

var

htmlSpan

=

document.createElement("span")

htmlSpan.innerHTML

=

"This

is

a

test"

insertAfter(htmlSpan,txtName)

将htmlSpan

作为txtName

的兄弟节点插入到txtName

节点之后

总结:

1、appendChild和insertBefore是做对节点的方法来使用的,而insertAfter只是自定义的一个函数

2、insertBefore相对于appendChild来说,比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。

3、使用appendChild和insertBefore来插入新的节点前提是,其兄弟节点必须有共同的父节点

1

2

3

4

5

6

7

function insertEle() {

var oTest = document.getElementById("box-one")

var newNode = document.createElement("div")

var reforeNode = document.getElementById("p1")

newNode.innerHTML = " This is a newcon "

oTest.insertBefore(newNode,reforeNode.nextSibling)//新建的元素节点插入id为P1节点元素的后面。

}

第二种

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

// 自定义函数向后插入

function insertAfter( newElement, targetElement)

{

var parent = targetElement.parentNode

if ( parent.lastChild == targetElement )

{

// 如果最后的节点是目标元素,则直接添加。因为默认是最后

parent.a( newElement )

}

else

{

//如果不是,则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面

parent.insertBefore( newElement, targetElement.nextSibling )

}

}


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11758555.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存