.add( 선택자 ) .add( 요소 ) .add( HTML ) .add( 선택 ) .add( 선택기, 컨텍스트 )
설명: 일치하는 요소 집합에 추가된 요소로 새 jQuery 개체를 만듭니다.
DOM 요소 집합을 나타내는 jQuery 객체가 주어지면 메서드는 .add()해당 요소와 메서드에 전달된 요소의 합집합에서 새 jQuery 객체를 구성합니다. 에 대한 인수는 jQuery 선택기 표현식, DOM 요소에 대한 참조 또는 HTML 스니펫을 포함하여 허용되는 .add()거의 모든 것이 될 수 있습니다
.$() 이 메서드가 요소를 메서드에 전달된 순서대로 기존 컬렉션에 추가한다고 가정하지 마십시오
.add(). 모든 요소가 동일한 문서의 구성원인 경우 결과 컬렉션은 .add()문서 순서대로 정렬됩니다.
즉, 문서에서 각 요소가 나타나는 순서입니다. 컬렉션이 다른 문서의 요소나 어떤 문서에도 없는 요소로 구성된 경우 정렬 순서는 정의되지 않습니다.
요소를 잘 정의된 순서로 정렬 오버헤드 없이 jQuery 개체를 만들려면 서명을 사용합니다 $(array_of_DOM_elements). 업데이트된 요소 집합은 다음(연결된) 메서드에서 사용하거나 나중에 사용하기 위해 변수에 할당할 수 있습니다.
$( "p" ).add( "div" ).addClass( "widget" ); var pdiv = $( "p" ).add( "div" );
다음은 메소드가 새 세트를 작성하고 pdiv의 원래 세트를 변경하지 않고 그대로 두기 때문에 추가된 요소를 저장 하지 않습니다.
var pdiv = $( "p" ); pdiv.add( "div" );
간단한 목록과 그 뒤에 오는 단락이 있는 페이지를 고려하십시오.
- list item 1
- list item 2
- list item 3
.add()메서드의 인수 로 선택기 또는 DOM 요소 자체에 대한 참조를 사용하여 목록 항목을 선택한 다음 단락을 선택할 수 있습니다 .
$( "li" ).add( "p" ).css( "background-color", "red" );
또는
$( "li" ).add( document.getElementsByTagName( "p" )[ 0 ] ) .css( "background-color", "red" );
아래 예제를 통해 테스트 하시기 바랍니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>add demo</title>
<style>
div {
width: 60px;
height: 60px;
margin: 10px;
float: left;
}
p {
clear: left;
font-weight: bold;
font-size: 16px;
color: blue;
margin: 0 10px;
padding: 2px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>요소 추가!!!</p>
<script>
$( "div" ).css( "border", "2px solid red" )
.add( "p" )
.css( "background", "yellow" );
</script>
</body>
</html>
'코딩 배우기' 카테고리의 다른 글
| jquery ajax() (0) | 2023.05.12 |
|---|---|
| jquery serialize() (0) | 2023.05.12 |
| 자바 JPA 트랜잭션 커밋(commit) (0) | 2023.05.11 |
| JPA(Entity Manager)는 자바에서 ORM(Object Relational Mapping) 기술을 지원하기 위한 API (0) | 2023.05.11 |
| [JPA 매커니즘] JpaRepository (0) | 2023.05.11 |
댓글