jquery traversal에서 parent()와 parent()의 차이점과 parentUntil() 메소드에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jquery traversal에서 parent()와 parent()의 차이점과 parentUntil() 메소드에 대한 자세한 설명

巴扎黑

Jun 24, 2017 am 09:26 AM

jqueryparent차이점횡단

이 글에서는 주로 jquery traversal과 parentUntil() 메소드의 parent()와 parent()의 차이점을 소개합니다. 도움이 필요한 친구가 여기 와서 참고할 수 있습니다. 모든 사람에게 도움이 되기를 바랍니다.

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

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

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

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

아래에 예시가 인용되어 있습니다

코드는 다음과 같습니다.

<ul class="level-1">
 <li class="item-i">I</li>
 <li class="item-ii">II
  <ul class="level-2">
   <li class="item-a">A</li>
   <li class="item-b">B
    <ul class="level-3">
     <li class="item-1">1</li>
     <li class="item-2">2</li>
     <li class="item-3">3</li>
    </ul>
   </li>
   <li class="item-c">C</li>
  </ul>
 </li>
 <li class="item-iii">III</li>
</ul>

프로젝트 A에서 시작하면 해당 상위 요소를 찾을 수 있습니다.

코드는 다음과 같습니다.

$(&#39;li.item-a&#39;).parents().css(&#39;background-color&#39;, &#39;red&#39;);

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

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

코드는 다음과 같습니다.

$(&#39;li.item-a&#39;).parent().css(&#39;background-color&#39;, &#39;red&#39;);

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

<body>body
    <p id="one">one
        <p id="two">hello</p>
        <p id="three">three
            <p>p
               <a href="#">tonsh</a>
           </p>
        </p>
     </p>
</body>

thinking :

코드는 다음과 같습니다.

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

아래 참조 이전 프로젝트에서 사용된 예제를 살펴보겠습니다

코드는 다음과 같습니다.

<p id=&#39;p1&#39;>
 <p id=&#39;p2&#39;><p></p></p>
 <p id=&#39;p3&#39; class=&#39;a&#39;><p></p></p>
 <p id=&#39;p4&#39;><p></p></p>
</p>

jquery 관련 코드

코드는 다음과 같습니다

$(&#39;p&#39;).parent()
$(&#39;p&#39;).parent(&#39;.a&#39;)
$(&#39;p&#39;).parent().parent()
$(&#39;p&#39;).parents()
$(&#39;p&#39;).parents(&#39;.a&#39;)

관련 지식 포인트:

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()도 올라가는 것입니다(조상 요소 찾기)
아래 예를 보세요:

코드는 다음과 같습니다.

if(
mysql_num_rows
($query)){
  while($arr=
mysql_fetch_array
($query)){
echo <<<admin
          <tr style="
text-align
:center;">
            <td><input type="checkbox" name="checkbox" value="$arr[id]" /></td>
            <td>$arr[id]</td>
            <td>$arr[log]</td>
            <td>$arr[ip]</td>
            <td>$arr[time]</td>
            <td><form><input type="hidden" name="id" value="$arr[id]" /><span class="del">删除</span><img  src="/static/imghwm/default1.png"  data-src="images/del.gif"  class="lazy"   / alt="jquery traversal에서 parent()와 parent()의 차이점과 parentUntil() 메소드에 대한 자세한 설명" ></form></td>
          </tr>
admin;
  }//while end;
}else{
  echo "<tr align=center><td colspan=6>暂无登陆日志</td></tr>";
}

결과는 다음과 같습니다.

분석:

코드는 다음과 같습니다.

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

코드는 다음과 같습니다.

//删除选中日志$(".delcheckbox").click(function(){    var str=&#39;&#39;;    $(".tab input[name=checkbox]:checked").each(function(){        str+=$(this).val()+&#39;,&#39;;    });    str=str.substring(0,str.length-1);    if(chk_Batch_PKEY(str)){        art.dialog.confirm(&#39;你确认删除选中的日志吗？&#39;,function(){            $.post("myRun/managerlog_del.php",{id:str},function(tips){                if(tips==&#39;ok&#39;){                    art.dialog.through({title:&#39;信息&#39;,icon:&#39;face-smile&#39;,content:&#39;删除成功&#39;,ok:function(){art.dialog.close();location.reload();}});                }else{                    art.dialog.tips(&#39;删除失败&#39;);                }            });            return true;        });    }else{        art.dialog.through({title:&#39;信息&#39;,icon:&#39;face-sad&#39;,content:&#39;请选择删除的日志&#39;,ok:function(){art.dialog.close();}});    }}).addClass("pointer");
//del event$(".del").bind("click",function(event){    var _tmpQuery=$(this);    var id=$("input[name=&#39;id&#39;]",$(this).parents("form:first")).attr("value");    art.dialog.confirm(&#39;你确认删除该日志吗？&#39;,function(){        $.post("myRun/managerlog_del.php",{id:id},function(tips){            if(tips==&#39;ok&#39;){                art.dialog.tips(&#39;成功删除&#39;);                _tmpQuery.parents(&#39;tr:first&#39;).hide();            }else{                art.dialog.tips(tips,5);            }        });        return true;    });});

두 번째 문을 살펴보겠습니다.

코드는 다음과 같습니다.

<!DOCTYPE html><html><head>  <script type="text/javascript" src="/jquery/jquery.js"></script></head>
<body><ul class="level-1 yes">  <li class="item-i">I</li>  <li class="item-ii">II    <ul class="level-2 yes">      <li class="item-a">A</li>      <li class="item-b">B        <ul class="level-3">          <li class="item-1">1</li>          <li class="item-2">2</li>          <li class="item-3">3</li>        </ul>      </li>      <li class="item-c">C</li>    </ul>  </li>  <li class="item-iii">III</li></ul>
<script>$("li.item-a").parentsUntil(".level-1").css("background-color", "red");
$("li.item-2").parentsUntil( $("ul.level-1"), ".yes"  )  .css("border", "3px solid blue");</script>
</body>

코드는 다음과 같습니다.

<ul class="level-1 yes"> -->不符合。其实它是符合li.item-a的祖先元素的。但是根据parentsUntil()方法定义，是不包括选择器、DOM节点或jquery对象所匹配的元素的
  <li class="item-i">I</li>-->不符合，这是它祖先元素的同辈元素。并不是li.item-a的祖先元素。
  <li class="item-ii">II  -->符合
    <ul class="level-2 yes"> -->符合
      <li class="item-a">A</li> -->从这开始往上找其祖先元素。
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

위 내용은 jquery traversal에서 parent()와 parent()의 차이점과 parentUntil() 메소드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?May 14, 2025 am 12:15 AM

JavaScript 코어 데이터 유형은 브라우저 및 Node.js에서 일관되지만 추가 유형과 다르게 처리됩니다. 1) 글로벌 객체는 브라우저의 창이고 node.js의 글로벌입니다. 2) 이진 데이터를 처리하는 데 사용되는 Node.js의 고유 버퍼 객체. 3) 성능 및 시간 처리에는 차이가 있으며 환경에 따라 코드를 조정해야합니다.

JavaScript 댓글 : / / * * /사용 안내서May 13, 2025 pm 03:49 PM

javaScriptUSTWOTYPESOFSOFCOMMENTS : 단일 라인 (//) 및 multi-line (//)

Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

See all articles