AI is generating summary This article introduces the relational search methods in Jquery, including parent (), prev (), next (), children (), which are used to locate elements and dynamically add attributes. This article takes the Z-Blog code optimization plug-in as an example to illustrate the advantages and disadvantages of relationship lookup in practical operation, and provides relevant code examples.
It is also amazing that the epidemic makes a person who plays musical instruments start to write code.
Record some JQ positioning operations to avoid Baidu when it is used.
Sometimes we need to find an element in the page and add some attributes dynamically, such as Z-Log code optimization+replication enhanced version For this plug-in, clicking different buttons requires locating different elements.
Of course, you can use the $("# id") method to locate elements, but for example, Z-Blog, the element inserted into the code does not have an ID, so it is useful to use the relational search method to locate elements.
Disadvantages of relationship lookup:
The operation is tedious and easy to be misjudged
Jquery methods used:
Parent() Find parent element
Prev() Find the previous sibling element
Next() Find the next sibling element
Children() Find Subclass Elements
Chestnuts:
<! doctype html> <html> <head> <meta charset="UTF-8"> <title>JQ Relation Search</title> <script src=" https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js "></script> </head> <body> <div> <h1>aaaaaaaaaaa</h1> <p>ppppppppppp</p> <h1>aaaaaaaaaaa</h1> <p>ppppppppppp</p> </div> <div> parent().prev() </div> <div> <button id="parentprev">parent().prev()</button> <button id="parentnext">parent().next()</button> <button id="children">children</button> </div> <div> parent().next() </div> <script> $("#parentprev").click(function(){ $(this).parent().prev().css("color","red"); }); $("#parentnext").click(function(){ $(this).parent().next().css("color","red"); }); $("#children").click(function(){ $(this).parent().prev().prev().children("p").css("color","red"); }); </script> </body> </html>
