The difference between parent() and parents() in jquery traversal and the detailed explanation of parentsUntil() method

.parent(selector) Gets the parent element of each element in the current set of matching elements, filtered by the selector (optional).

.parents(selector) Gets the ancestor elements of each element in the current set of matching elements, filtered by the selector (optional).

Given a jQuery object representing a collection of DOM elements, the .parents() method allows us to search the DOM tree for ancestor elements of these elements and construct a new one with the matching elements in order from the nearest parent element upwards jQuery object. Elements are returned in order from the nearest parent element outward. The .parents() and .parent() methods are similar, except that the latter traverses a single level up the DOM tree.

Both methods can accept optional selector expressions of the same type as the arguments we passed into the $() function. If this selector is applied, elements will be filtered by testing whether they match the selector.

The following is an example

Copy the codeThe code is as follows:

< ul class="level-1">
I

II
 < ;ul class="level-2">
 
A

B
 
1

2
  
3

 ">C

III

If we start from item A, we can find its ancestor elements

Copy code The code is as follows:

$('li.item-a').parents().css('background-color', 'red');

This The result of this call is that the level-2 list, item II, and level-1 list elements (all the way up the DOM tree until ) are set to a red background. Since we didn't apply a selector expression, the parent element naturally becomes part of the object. If a selector is applied, the element is checked to see if it matches the selector before it is included. Since we didn't apply a selector expression, all ancestor elements are part of the returned jQuery object. If a selector is applied, only matching items within it will be included.

If we start with item A, we can find its parent element:

Copy the code The code is as follows:

$('li.item-a').parent().css('background-color', 'red');

The result of this call is, level-2 list sets red background. Since we didn't apply a selector expression, the parent element naturally becomes part of the object. If a selector is applied, the element is checked to see if it matches the selector before it is included.

Look at an example below

Copy the code The code is as follows:

body

one

hello

three
🎜> < /div>

Thinking:

Copy the code The code is as follows:

$("a"). parent()
$("a").parents()
$("a").parents("div:eq(0)")
var id=$("a"). parents("div:eq(1)").children("div:eq(0)").html();

Example 3

Copy code The code is as follows:

< ;div id='div4'>

Copy code The code is as follows:

$('p').parent()
$('p').parent('.a ')
$('p').parent().parent()
$('p').parents()
$('p').parents('.a')

Let’s take a look at the examples used in previous projects

Copy the code The code is as follows:

if(mysql_num_rows($query)){
while($arr=mysql_fetch_array($query)){
echo <<
td>$arr[id]
< ;td>$arr[time]
;span class="del">Delete

>admin;
}//while end;
}else{
echo "No login log}

jquery related code

Copy code

The code is as follows:

//Delete the selected log
$(".delcheckbox").click(function(){
var str='';
$(".tab input[name=checkbox ]:checked").each(function(){
str =$(this).val() ',';
});
str=str.substring(0,str.length- 1);
if(chk_Batch_PKEY(str)){
art.dialog.confirm('Are you sure to delete the selected log?',function(){
$.post("myRun/managerlog_del. php",{id:str},function(tips){
if(tips=='ok'){
,content:'Deletion successful',ok:function(){art.dialog.close();location.reload();}});
}else{
art.dialog.tips('Deletion failed ' ); ',icon:' face-sad',content:'Please select the log to delete',ok:function(){art.dialog.close();}});
}
}).addClass("pointer");

//del event
$(".del").bind("click",function(event){
var _tmpQuery=$(this);
var id=$ ("input[name='id']",$(this).parents("form:first")).attr("value");

art.dialog.confirm('Are you sure you want to delete this log? ? ',function(){

$.post("myRun/managerlog_del.php",{id:id},function(tips){
if(tips=='ok'){
art .dialog.tips('successfully deleted');
_tmpQuery.parents('tr:first').hide();
}else{
🎜> >
var id=$("input[name='id']",$(this).parents("form:first")).attr("value");

References:

parent(): http://www.w3school.com.cn/jquery/traversing_parent.asp

parents(): http://www.w3school.com.cn/jquery/traversing_parents.asp

parentsUntil() method

Definition: parentsUntil() Gets the ancestor elements of each element in the current set of matched elements, up to (but not including) the element matched by a selector, DOM node, or jQuery object.

In fact, the principles of the parentsUntil() method, nextUntil() method, and prevUntil() method are the same. The only difference is that nextUntil() is going down, prevUntil() is going up (sibling elements), and parentsUntil() is also going up (finding ancestor elements)
Look at an example below:

Copy the code

The code is as follows:

II
- A
- B
  - 1
  - 2
  - 3
- C

得到结果如下：

分析：

复制代码代码如下:

$("li.item-a").parentsUntil(".level-1").css("background-color", "red");

复制代码代码如下:

 -->不符合。其实它是符合li.item-a的祖先元素的。但是根据parentsUntil()方法定义，是不包括选择器、DOM节点或jquery对象所匹配的元素的
I
-->不符合，这是它祖先元素的同辈元素。并不是li.item-a的祖先元素。
II  -->符合
     -->符合
A
 -->从这开始往上找其祖先元素。
B
        
1

2

3

C

III

再来看第二个语句：

复制代码代码如下:

$("li.item-2").parentsUntil( $("ul.level-1"), ".yes"  ).css("border", "3px solid blue");

复制代码代码如下:

--> is its ancestor element and satisfies the selector expression ".yes", but according to the parentsUntil() method definition, it is not included The 
I
 of the element matched by the selector, DOM node or jquery object does not match and is not its ancestor element. 
II--> is its ancestor element that does not satisfy 
  --> is its ancestor element Satisfies the selector expression ".yes" [So, the node is finally matched and the blue border effect is obtained as shown above]
                                                                                            🎜>                                                                                                                                                                                   ;li class="item-1">1 
                                                                                                                                                                       ;C
 
 

III

 

Related labels：

parent

source：php.cn

Previous article：Jquery uses Firefox FireBug plug-in to debug Ajax steps explained_jquery Next article：A small example of extending the time formatting function of JS Date object_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

The difference between parent() and parents() in jquery traversal and the detailed explanation of parentsUntil() method_jquery