jQuery 순회 add() 메소드

jQuery는 $() 메서드를 통해 지정된 요소 컬렉션을 찾은 후 일련의 작업을 수행할 수 있는 컬렉션 개체입니다. $() 뒤에는 컬렉션 개체가 이미 결정되었음을 의미합니다. 나중에 이 컬렉션에 새 요소를 추가해야 하는 경우 어떻게 해야 합니까? jQuery는 이를 위해 새로운 jQuery 객체를 생성하는 데 사용되는 add 메소드를 제공합니다. , 요소는 일치하는 요소 집합에 추가됩니다.

.add()의 인수는 jQuery 선택기 표현식, DOM 요소 또는 HTML 조각 참조를 포함하여 거의 모든 $()를 허용할 수 있습니다.

간단히 사례를 살펴보세요:

작업: 모든 li 요소를 선택한 다음 p 요소를 li 컬렉션에 추가합니다

1개 처리 중: 선택기 통과

$('li').add( 'p')

프로세스 2: DOM 요소 전달

$('li').add(document.getElementsByTagName('p')[0])

또 다른 방법은 P 태그를 동적으로 생성하여 컬렉션에 추가하는 것입니다. 지정된 위치에 삽입하면 요소 자체의 배열이 변경됩니다

$('li').add('<p>새 p 요소</p>').appendTo( 대상 위치)

으르르르르

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left { width: auto; height: 150px; } .left div { width: 150px; height: 120px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>add方法()</h2> <div class="left first-div"> <div class="div"> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> <p>新的p元素</p> </div> </div> <div class="right"></div> <br/> <button>点击：add传递元素标签</button> <button>点击：add传递html结构</button> <script type="text/javascript"> $("button:first").click(function() { //把p元素添加到li的合集中 $('li').add('p').css('background', 'red') }) </script> <script type="text/javascript"> $("button:last").click(function() { //把html结构'<p>新的p元素</p>' //加入到li的合集中，为了能够在页面上显示 //需要再重新appendTo到指定的节点处 //值得注意：整个结构位置都改变了 $('li').add('<p>新的p元素</p>').appendTo($('.right')) }) </script> </body> </html>

제출하다 코드 재설정

자동운전