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>

제출하다 코드 재설정

자동운전

전체 화면