Tutorial on the difference between parent(), parents() and parentsUntil() in JQuery and how to use it

parent() is actually very simple, it just specifies the outer layer of each element in the selector. For example, $("p"), then the result is data wrapped in

, the result set is a object set. You can use eq(i), first(), last() to locate. If the data is

• how to use $("p").parent("li") the query result is empty because the outer layer of

  is < ;p>.

  JQueryIn the manual,

  <p><p>Hello</p></p><p class="selected"><p>Hello Again</p></p>

  Copy after login

  <pre class="brush:php;toolbar:false">$("p").parent(".selected");

  Copy after login

  //结果:

  Copy after login

  [ <p class="selected"><p>Hello Again</p></p> ]

  Copy after login
  
  

  can be understood as

  $("p").parent().find(".selected");

  Copy after login

  Find the one or more of the direct parent whose class is selected. indivual.

  So parent() is not very practical.

  parents() is all the parents of each element in the selector. If the selector has multiple parents, it will return a result set. The results of the result set are arranged from the inner layer to the outer layer. The outermost layer is the entire html element, and the first one is the element that tightly wraps each element in the selector. There are no duplicate elements in the result set.

  Similarly, when parameters are taken, the specified element is also found in the result set

  $("p").parents(".selected");

  Copy after login

  $("p").parents().find(".selected");

  Copy after login

  So if we want to find a certain father of the selector, we must first find all his parents, and then find This father.

  When we want to find a parent of the current element, the following syntax is used.

  $(this).parents("li");//$(this).parents().find("li");

  Copy after login

  So parents() is very practical. Very commonly used.

  parentsUntil(expr). If parents() is to find all the parents of each element in the selector in the entire html element, then the function of parentsUntil() is to limit the scope of the search. This range is $(expr).html()

  $("p").parents();//包含整个html 元素$("p").parentsUntil("html");//不包含整个html元素

  Copy after login

  The result sets of the above two expressions only differ by one element, which is the entire html element.

  $("p").parents();//包含整个html 元素$("p").parentsUntil();//包含整个html元素

  Copy after login

  When parentsUntil() takes no parameters, it is equivalent to parents();

  The results in the result set of parentsUntil(expr) are also arranged from the inner layer to the outer layer. parentUntil(expr) will search outward layer by layer starting from the first parent element that wraps the element until it encounters the first element that matches the expression (expr).

  $("p").parentsUntil(expr);

  Copy after login

  Equivalent to searching all the parent elements of each element in $("p") from the inside and outside of $(expr)

  In order to find the specified element more accurately , can be used as follows.

  $("p").parentsUntil("ul").find("li");

  Copy after login

  But the above method cannot find ul>li, only ul * li. Because parentsUntil() returns the largest parent in the result set is ul>* and find is to find elements that do not include ul>* in the descendant elements of ul>*. Therefore, it is not feasible to use this method to find ul>li

  You can use the following code to query all li under ul (first line), and all li under the nearest ul (second line)

  $("p").parents("ul").find("li");$("p").parents("ul").eq(0).find("li");

  Copy after login

  parentsUntil(expr), the returned result set does not include expr itself, and if find() is used later, it will be queried in the descendant elements of the result set, so the query result is not the child elements of expr but the second generation and Child elements after the second generation.

  In view of the performance of parentsUntil, it is generally not recommended to use it.

  parnetsUntil() can be used to find certain elements under a certain module.

  When we want to specifically operate on an element in the result set, we must remember to use eq(i), first(), last() and other functions to obtain the value, otherwise the operation will be the entire result set.

  Dynamic search for parent nodes

  $(this).parent("li");//找到第一个包住$(this)的dom，如这个dom是li则返回他的对象，如果不是则返回空对象$(this).parents("li");//找到所有$(this)的父亲，并在其中找出所有的li的对象，组成结果集。结果集中结果由内之外排列$(this).parents().find("li");//同上。$(this).parents("li").eq(0);//$(this)外第一个包裹他的li对象$(this).parentsUntil("li");//$(this)外到第一个包裹他的li之内的所有的$(this)的父亲$(this).parentsUntil("ul").find("li");//$(this)在ul之前的那个父亲之内（不包括该父亲）找所有的li;如果<ul><li><p><a onclick="f()">中a是this的话，那么相当于$("li").find("li");最后结果之空。$(this).parents("li").sublings();//查找所在的li的所有同辈元素

  Copy after login

  The function corresponding to parent() is children()

  The function corresponding to parents() is find()

  The above is the detailed content of Tutorial on the difference between parent(), parents() and parentsUntil() in JQuery and how to use it. For more information, please follow other related articles on the PHP Chinese website!