current position：Home>JQuery gets the method summary of parent element, child element and brother element

JQuery gets the method summary of parent element, child element and brother element

2022-04-29 19:50:53【Hua Weiyun】

In the process of project development , The methods applied to style control of elements are as follows ：

function showOthers(obj){	//  adopt jquery Method to get the element value 	var type = $(obj).attr('_value');			if($(obj).is(':checked')){// Choose 			$(obj).parent().parent().siblings().children().children("#"+type+"div").show();			$(obj).parent().parent().siblings().children().children("#"+type+"div").children().attr("require","true");		}else{			/* java Attention should be paid to end treatment   First, check whether it is checked , Value only if checked  */			$(obj).parent().parent().siblings().children().children("#"+type+"div").hide();			$(obj).parent().parent().siblings().children().children("#"+type+"div").children().removeAttr("require");		}	}

among ,

  • jQuery.parent(expr) Find the father node , You can pass in expr To filter , such as $("span").parent() perhaps $("span").parent(".class");

  • jQuery.parents(expr), Be similar to jQuery.parents(expr), But it's looking for all the ancestral elements , Not limited to the parent element ;

  • jQuery.children(expr). Return all child nodes , This method will only return the direct child node , Not all descendant nodes will be returned ;

  • jQuery.contents(), Return to everything below , Include nodes and text . This method and children() The difference is , Include blank text , It will also be used as a jQuery Object returns ,children() Then only nodes will be returned ;

  • 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 , Not all sibling nodes ;

  • jQuery.nextAll(), Return all subsequent sibling nodes ;

  • jQuery.siblings(), Return to sibling node , No matter before or after ;

  • jQuery.find(expr), Follow jQuery.filter(expr) Totally different .jQuery.filter() From the beginning jQuery Filter out a part of the object collection , and jQuery.find() Return result of , There will be no content in the initial set , such as $("p"),find("span"), It's from p Elements start looking for , Equate to $("p span");

So in js How is it realized in ？ Let's talk about javascript Medium nextSibling and previousSibling Precautions for use .

JavaScript Medium nextSibling and previousSibling Similar to jquery Of next() and prev(), It's all about getting the next / Last sibling element , If the next peer node does not exist , The return value of this property is null. But there are still differences in specific use , If you don't pay attention , It will cause mistakes .

html Various spaces in the structure , Line breaks may treat text nodes as sibling elements . This will lead to errors .
For example, the following code 

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script> window.onload = function() { var nextType = document.getElementById('one').nextSibling; alert(nextType.nodeType); } </script></head><body>    <div id="div">        <p id = "one"> I am a p</p>        <span id="two"> I am a span</span>    </div></body></html>

In the above code , Got id by "one" And use nextSibling Got his next sibling element . Assigned to a variable nextType.

var nextType = document.getElementById('one').nextSibling;

And use alert(nextType.nodeType); His node type , If you follow common sense , Elements p The next adjacent sibling element is span, The pop-up number should be “1”, But I'm in Firefox , Google ,IE browser （ The Internet says that only Firefox will change the line , Spaces are treated as text nodes , But I tested Google ,IE The browser effect is the same , It's a little confusing ） After opening , The number that pops up is 3, That is, the text node . This is because line breaks are treated as text nodes , Become p The next sibling element of the element .

If I want to get span Text value , It needs to be written like this 

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script> window.onload = function() { var nextType = document.getElementById('one').nextSibling; var span = nextType.nextSibling;　　　　 alert(span.lastChild.nodeValue);　　 } </script></head><body>    <div id="div">        <p id = "one"> I am a p</p>        <span id="two"> I am a span</span>    </div></body></html>

p and span The middle of the label is separated by a text node , Need continuous use 2 Time nextSibling To select span Tag gets the text value .

Be careful ️：firstChild,lastChild,nextSibling,previousSibling Will treat spaces or line breaks as nodes , But there are alternative properties . So in order to find the corresponding element accurately , Will use firstElementChild,lastElementChild,nextElementSibling,previousElementSibling Compatible writing , This is a JavaScript Own attributes .

But the bad news is IE6,7,8 Incompatible with these properties .IE9 The above and Firefox Google support . You can refer to the following method to filter text nodes to obtain the correct next element node .

    function getNextElement(element){            var e = element.nextSibling;            if(e == null){// Test whether sibling nodes exist , Otherwise, it returns empty                 return null;            }            if(e.nodeType==3){// If the sibling element is a text node                 var two = getNextElement(e);                if(two.nodeType == 1)                    return two;            }else{                if(e.nodeType == 1){// Confirm that the node is an element node before returning                     return e;                }else{                    return false;                }            }        }

attach ：HTML DOM nodeType attribute

return body The node type of the element :
nodeType Property returns the node type .

  • If the node is an element node ,nodeType Property returns 1.
  • If the node is an attribute node , nodeType Property returns 2.
  • If the node is a text node ,nodeType Property returns 3.
  • If the node is an annotation node ,nodeType Property returns 8.

The property is read-only .

copyright notice
author[Hua Weiyun],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291801146934.html

The sidebar is recommended

guess what you like

Random recommended