jquery traversal의 parent()와 parent()의 차이점과 parentUntil() method_jquery에 대한 자세한 설명

.parent(selector) 선택기로 필터링된 현재 일치 요소 집합에 있는 각 요소의 상위 요소 를 가져옵니다(선택 사항).

.parents(selector) 선택기로 필터링된 현재 일치 요소 집합에 있는 각 요소의 상위 요소 를 가져옵니다(선택 사항).

DOM 요소 모음을 나타내는 jQuery 객체가 있는 경우 .parents() 메서드를 사용하면 DOM 트리에서 이러한 요소의 조상 요소를 검색하고 가장 가까운 상위 요소부터 순서대로 일치하는 요소로 새 요소를 구성할 수 있습니다. jQuery 객체. 요소는 가장 가까운 상위 요소부터 바깥쪽으로 순서대로 반환됩니다. .parents() 및 .parent() 메서드는 후자가 DOM 트리에서 한 수준 위로 이동한다는 점을 제외하면 유사합니다.

두 메소드 모두 $() 함수에 전달한 인수와 동일한 유형의 선택적 선택기 표현식을 허용할 수 있습니다. 이 선택기를 적용하면 요소가 선택기와 일치하는지 테스트하여 요소가 필터링됩니다.

다음은 예시입니다

코드를 복사하세요코드는 다음과 같습니다

< ul class="level-1">

I

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

A

 
• 1

 
• 2
   
• 3

 

 

">C< ;/li>

III

항목 A에서 시작하면 해당 항목의 조상 요소를 찾을 수 있습니다.

코드 복사 코드는 다음과 같습니다. 다음은 다음과 같습니다.

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

이것은 이 호출의 결과로 레벨 2 목록, 항목 II 및 레벨 1 목록 요소(까지 DOM 트리까지)가 빨간색 배경으로 설정됩니다. 선택기 표현식을 적용하지 않았으므로 상위 요소는 자연스럽게 개체의 일부가 됩니다. 선택기가 적용되면 요소가 포함되기 전에 선택기와 일치하는지 확인합니다. 선택기 표현식을 적용하지 않았으므로 모든 상위 요소는 반환된 jQuery 객체의 일부입니다. 선택기가 적용되면 그 안에 일치하는 항목만 포함됩니다.

항목 A로 시작하면 해당 상위 요소를 찾을 수 있습니다.

코드 복사 코드는 다음과 같습니다.

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

이 결과 호출은 레벨 2 목록이 빨간색 배경을 설정합니다. 선택기 표현식을 적용하지 않았으므로 상위 요소는 자연스럽게 개체의 일부가 됩니다. 선택기가 적용되면 요소가 포함되기 전에 선택기와 일치하는지 확인합니다.

아래 예시 보기

코드 복사 코드는 다음과 같습니다

body
 

one
  

hello

  

3
  🎜> < /div>



생각:

코드 복사 코드는 다음과 같습니다.

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

예 3

코드 복사 코드는 다음과 같습니다.

< /div>
< ;div id='div4'>

코드 복사 코드는 다음과 같습니다.

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

이전 프로젝트에서 사용한 예제 살펴보기

코드 복사 코드는 다음과 같습니다.

if(mysql_num_rows($query)){
while($arr=mysql_fetch_array($query)){
echo < ;<   
                                                 | /td>
< ;td>$arr[시간 ]
                                                                                                        ;span class="del">삭제
>>admin;
}//while end;
}else{
echo "로그인 로그 없음 ";
}


jquery 관련 코드

코드 복사

코드는 다음과 같습니다.

//선택한 로그 삭제
$(".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('선택한 로그를 삭제하시겠습니까?',function(){
$.post("myRun/ Managerlog_del.php",{id:str},function(tips){
if(tips=='ok'){
,content:'삭제 성공',ok:function(){art.dialog. close();location.reload();}});
            }else{
                    art.dialog.tips('삭제 실패 ' ) ',icon:' 얼굴-슬픈',content:'선택하세요. 삭제할 로그',ok:function(){art.dialog.close();}});
}
}).addClass("pointer")


//del 이벤트
$(".del").bind("click",function(event){
var _tmpQuery=$(this);
var id=$ ("input[name='id']",$(this).parents("form:first")).attr("value"); art.dialog.confirm('정말로 하시겠습니까? 이 로그를 삭제하시겠습니까? ',function(){

$.post("myRun/managerlog_del.php",{id:id},function(tips){
if(tips=='ok'){
art .dialog.tips('성공적으로 삭제됨');
_tmpQuery.parents('tr:first').hide();
          }else{
                          >                                       >
var id=$("input[name='id']",$(this).parents("form:first")).attr("value");


참조:


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



학부모(): http://www.w3school.com.cn/jquery/traversing_parents.asp

parentsUntil() 메서드

정의: parentUntil() 현재 일치하는 요소 세트에서 선택기, DOM 노드 또는 jQuery 객체와 일치하는 요소까지(포함하지 않음) 각 요소의 상위 요소를 가져옵니다.

사실 parentUntil() 메소드, nextUntil() 메소드, prevUntil() 메소드의 원리는 동일합니다. 유일한 차이점은 nextUntil()이 내려가고, prevUntil()이 올라가고(형제 요소), parentUntil()도 올라가고(조상 요소 찾기)
아래 예를 보세요:

코드 복사

코드는 다음과 같습니다.