>  기사  >  웹 프론트엔드  >  JQuery에서 parent(), parent() 및 parentUntil()의 차이점과 사용 방법에 대한 튜토리얼

JQuery에서 parent(), parent() 및 parentUntil()의 차이점과 사용 방법에 대한 튜토리얼

巴扎黑
巴扎黑원래의
2017-06-24 09:28:181988검색

parent()는 실제로 선택기에서 각 요소의 외부 레이어를 지정하는 매우 간단합니다. 예를 들어 $("p")이면 결과는

로 묶인 데이터입니다(예:

).

가 여러 개인 경우 결과 집합은 objects 집합입니다. eq(i), first(), last()를 사용하여 찾을 수 있습니다. 데이터가

  • $("p").parent("li") 사용 방법인 경우

    의 외부 레이어가 비어 있기 때문에 쿼리 결과는 비어 있습니다.

    입니다.

    JQuery 매뉴얼에서

    <p><p>Hello</p></p><p class="selected"><p>Hello Again</p></p>
    <pre class="brush:php;toolbar:false">$("p").parent(".selected");
    //结果:
    [ <p class="selected"><p>Hello Again</p></p> ]

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

    로 이해될 수 있습니다. 직계 상위가 선택된 하나 또는 여러 개를 찾으세요.

    그래서 parent()는 그다지 실용적이지 않습니다.

    parents()는 선택기의 각 요소의 모든 부모입니다. 선택기에 여러 부모가 있으면 결과 집합이 반환됩니다. 결과 집합의 결과는 내부 레이어에서 외부 레이어로 정렬됩니다. 가장 바깥쪽 레이어는 전체 html 요소이고 첫 번째 레이어는 선택기의 각 요소를 단단히 감싸는 요소입니다. 결과 집합에 중복된 요소가 없습니다.

    마찬가지로 매개변수를 사용하면 지정된 요소가 결과 집합에서도 발견됩니다

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

    따라서 선택자의 특정 아버지를 찾으려면 먼저 그의 부모를 모두 찾은 다음 아버지를 찾아야 합니다.

    현재 요소의 부모를 찾으려면 다음 구문을 사용합니다.

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

    그래서 parent()는 매우 실용적입니다. 매우 일반적으로 사용됩니다.

    parentsUntil(expr). parent()가 전체 html 요소에서 선택기의 각 요소의 모든 부모를 찾는 경우, parentUntil()의 기능은 검색 범위를 제한하는 것입니다. 이 범위는 $(expr).html()

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

    위의 두 표현식의 결과 집합은 전체 html 요소인 한 요소만 다릅니다.

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

    parentUntil()이 매개변수를 사용하지 않으면 parent()와 동일합니다.

    parentsUntil(expr) 결과 세트의 결과도 내부 레이어에서 외부 레이어로 정렬됩니다. parentUntil(expr)은 표현식(expr)과 일치하는 첫 번째 요소를 만날 때까지 요소를 래핑하는 첫 번째 상위 요소부터 시작하여 레이어별로 외부 레이어를 검색합니다.

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

    는 $(expr)

    의 내부와 외부에서 $("p")에 있는 각 요소의 모든 상위 요소를 검색하는 것과 동일합니다. 지정된 요소를 보다 정확하게 찾으려면 다음과 같이 사용할 수 있습니다.

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

    하지만 위의 방법으로는 ul>li를 찾을 수 없고 ul * li만 찾을 수 있습니다. parentUntil()은 결과 집합에서 가장 큰 부모를 반환하기 때문에 ul>*이고 find는 ul>*의 하위 요소에서 ul>*를 포함하지 않는 요소를 찾는 것입니다. 따라서 이 방법을 사용하여 ul>li를 찾는 것은 불가능합니다

    다음 코드를 사용하여 ul(첫 번째 줄) 아래의 모든 li, 가장 가까운 ul(두 번째 줄) 아래의 모든 li를 쿼리할 수 있습니다

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

    parentsUntil( expr) , 반환된 결과 집합에는 expr 자체가 포함되지 않으며 나중에 find()를 사용하면 결과 집합의 하위 요소에서 쿼리되므로 쿼리 결과는 expr의 하위 요소가 아니라 2세대 및 후속 하위 요소.

    부모님의 성과를 고려하여 일반적으로 사용하지 않는 것이 좋습니다.

    parnetsUntil()을 사용하면 특정 모듈에서 특정 요소를 찾을 수 있습니다.

    결과 집합의 특정 요소에 대해 구체적으로 작업하려면 eq(i), first(), last() 및 기타 함수를 사용하여 값을 가져와야 합니다. 그렇지 않으면 전체 결과 집합이 수술을 받다.

    동적으로 상위 노드 찾기

    $(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的所有同辈元素

    parent()에 해당하는 함수는 children()입니다.

    parent()에 해당하는 함수는 find()

    위 내용은 JQuery에서 parent(), parent() 및 parentUntil()의 차이점과 사용 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.