JS jquery Gets the current element's sibling previous next element _jquery

Source: Internet
Author: User

var chils= s.childnodes; Get all the sub nodes of S

var Par=s.parentnode; Get the parent node of S

var ns=s.nextsbiling; Get the next sibling node of S

var ps=s.previoussbiling; Get the last sibling node of s

var fc=s.firstchild; Gets the first child node of S

var lc=s.lastchile; Gets the last child node of s

JS gets node parent, child element

First of all talk about the acquisition of JS, it is much more troublesome than the jquery method, followed by the jquery method for comparison.

The JS method is much more cumbersome than jquery, mainly because the FF browser, FF browser will make your line wrap also as a DOM element

<div id= "Test" >
<div></div>
<div></div>
</div>

Native JS Gets the child element under the element with the ID test.

Can be used:

 
 

This is no problem.

At this time a.length=2;

But if we change the other way,

 
 

At this point, b.length in IE browser is not a problem, it is still equal to 2, but in the FF browser will make 4, because the FF also as an element of the newline.

So, here we are going to do the processing, we need to traverse these elements, the element type is a space and the text is deleted.

function Del_ff (elem) {
var elem_child = elem.childnodes;
for (var i=0 i<elem_child.length;i++) {
if elem_child[i].nodename = = "#text" &&!/\s/.test (elem_ Child.nodevalue))
{elem.removechild (elem_child)
}
}
}

The above function traverses the child element, when the node type inside the element is text and the node value of the text type node is empty. Just to remove him.

Nodenames can get the node type of a node,/\s/the regular expression of the non-empty character in JS. Front Plus! , it indicates that it is a null character

The test () method is used to detect whether a string matches a pattern. Syntax: Regexpobject.test (String)

Returns True if string strings contain text that matches regexpobject, or false.

NodeValue represents the value in this node.

RemoveChild is the child element of the deletion element.

Then, before calling the son, father, brother, these properties, call the above function to clean up the blanks.

<div id= "Test" >
<div></div>
<div></div>
</div>

<script >
Function dom () {
var s= document.getelementbyidx_x ("test");
DEL_FF (s);  Clear Space
var chils= s.childnodes;//Get all of S's sub nodes
var Par=s.parentnode;  Gets the parent node
var ns=s.nextsbiling of S;  Get S's next sibling node
var ps=s.previoussbiling;//Get S's previous sibling node
var fc=s.firstchild;  Gets the first child node of S,
var lc=s.lastchile;  Get the last child node of S
</script>

The following is a description of the parent, child, and sibling node lookup method of jquery

Jquery.parent (expr) for the Father node, you can filter through expr, such as $ ("span"). Parent () or $ ("span"). Parent (". Class")

Jquery.parents (expr), similar to jquery.parents (expr), but is to find all ancestor elements, not limited to the parent element

Jquery.children (expr). Returns all child nodes, this method only returns the direct child node, does not return all descendants node

Jquery.contents () returns all of the following, including nodes and text. The difference between this method and children () is that, including blank text, it is also used as a

The jquery object returns, children () returns only the node

Jquery.prev (), return to the previous sibling node, not all sibling nodes

Jquery.prevall (), return all previous sibling nodes

Jquery.next (), return to the next sibling node, not all sibling nodes

Jquery.nextall (), returning all sibling nodes after

Jquery.siblings (), Return sibling node, no points before and after

Jquery.find (expr) is completely different from jquery.filter (expr). Jquery.filter () is a subset of the initial set of jquery objects that is filtered out, while Jquery.find ()
The return result will not have the contents of the initial set, such as $ ("P"), Find ("span"), from the <p> element start looking for <span>, equivalent to $ ("P span")

The above introduction is this article about JS jquery to get the current element of the sibling of the next element, I hope to help.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.