Js/jquery the method of acquiring elements such as the previous/next sibling elements of the current element

Source: Internet
Author: User
$ (function () {
    //traversal gets array of INPUT element objects, binding Click event
    var len = $ ("input[type= ' file ']"). Length;
    for (var i = 0; i < len; i++) {
        $ ("input[type= ' file ']"). EQ (i). Click (function () {
            $ (this). Next (). Val ("");
            $ (this). Next (). Hide ();
            $ (this). CSS ("width", "200px");
        })
    }

jquery Fetch:

Jquery.parent (expr), looking for the Father node, can be passed in expr for filtering, 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), which 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 the inclusion of blank text is also returned as a jquery object, and 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 jquery object collection, and

Jquery.find (), the result of the return, will not have the contents of the initial collection, such as $ ("P"). FIND ("span"), from the <p> element start looking for <span>, equivalent to $ ("P span")

JS Get:

var chils= s.childnodes;  The Var par=s.parentnode of all sub nodes of S is obtained
;   Gets the parent node
var ns=s.nextsibling of S;   Get S's next sibling node
var ps=s.previoussibling;  Get the last sibling node of S
var fc=s.firstchild;   Gets the first child node of S,
var lc=s.lastchild;   Gets the last child node of s

JS get node Parent, child element: JS method will be much more troublesome than jquery, mainly because FF, Google Browser will be your line of change as a DOM element: empty text elements, the current IE is also the case

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

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

var a = Docuemnt.getelementbyid ("Test"). getElementsByTagName ("div");

This is no problem, at this time a.length=2;

But if we switch to another way:

var b =document.getelementbyid ("Test"). ChildNodes;

At this point b.length is no problem in IE browser, it is still equal to 2, but in FF and Google Browser will be 5, because the FF is also as an element of the newline (currently the new version of IE is also the case).

So, here we are going to do the processing.

Solution:

(1) When acquiring child nodes, the problem can be avoided by node.getelementsbytagname (). But getelementsbytagname to complex DOM structures is significantly better than using childnodes, because ChildNodes can handle the DOM's hierarchy.

(2) In practical use, Firefox in the traversal of child nodes, it may be in the For loop to add:

if (childnode.nodename== "#text") continue;//or use NodeType = 1

This allows you to skip some text nodes.

(3) to traverse these elements and delete the element type as text and space. It also needs to be handled in the same way as acquiring sibling elements.

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[i]);}}

The above function traverses the child element and deletes it when the element has a node type that is text and the node value of the text type node is empty.

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, the syntax is: Regexpobject.test (string), or False if string strings contain text that matches regexpobject.

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.

<! DOCTYPE html>  Turn from: https://www.cnblogs.com/goloving/p/7183803.html

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.