.addBack()

1 개요
2 문법
3 예제
4 참고

개요

.addBack()은 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 합니다.

문법

.addBack( [selector ] )

예를 들어 다음은 ul의 하위 요소 중 li를 선택하고, 추가적으로 처음 선택했던 ul을 선택합니다.

$( 'ul' ).find( 'li' ).addBack()

예제

div 요소 안에서 클래스 값이 ip인 p 요소를 찾아 선택을 하고, 추가로 div 요소도 선택하여 테두리를 만듭니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      .abc {
        padding: 5px;
        border: 1px solid #444444;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'div' ).find( 'p.ip' ).addBack().addClass( 'abc' );
      } );
    </script>
  </head>
  <body>
    <div>
      <p>Lorem</p>
      <p class="ip">Ipsum</p>
      <p>Dolor</p>
    </div>
  </body>
</html>

참고

어떤 요소를 선택하고, 추가로 다른 요소를 선택하고 싶다면 .add()를 사용합니다.

jQuery / Reference / :contains()

:contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다. 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다.

jQuery / Reference / .add()

개요 .add()는 어떤 요소를 추가로 선택할 때 사용합니다. 문법 .add( selector ) 예를 들어 다음은 ul 요소를 선택하고, 추가로 p 요소를 선택합니다. $( 'ul' ).add( 'p' ) 예제 1 li 요소를 선택하고, 추가로 p 요소를 선택한 후 색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...

jQuery / Reference / .prepend()

개요 .prepend()는 선택한 요소의 내용의 앞에 콘텐트를 추가합니다. 문법 .prepend( content ) 예제 1 순서 없는 목록 처음에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { line-height: ...

jQuery / Reference / .insertBefore()

개요 .insertBefore()는 특정 요소 앞에 요소를 추가하거나 이동시킵니다. 문법 .insertBefore( target ) 예제 1 p 요소 앞에 <h1>Hello</h1>를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, monospace; ...

jQuery / Reference / .each()

jQuery의 .each() 함수는 주로 배열, 객체, 또는 jQuery 선택자로 선택된 요소 집합에 대해 반복 작업을 수행하기 위해 사용됩니다. JavaScript의 for 또는 forEach 루프와 유사하지만, jQuery의 특성과 통합된 방식으로 작동합니다.

jQuery / Reference / .wrapAll()

개요 .wrapAll()은 선택한 요소 모두를 새로운 태그로 감쌉니다. 문법 .wrapAll( wrappingElement ) 예를 들어 다음은 모든 p 요소를 모아서 div 태그로 감쌉니다. $( 'p' ).wrap( '<div></div>' ); 예제 1 .wrap()은 선택한 요소에 각각 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div ...

jQuery / Reference / .remove()

개요 .remove()는 선택한 요소를 HTML 문서에서 제거합니다. 문법 .remove( ) 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣습니다. 예를 들어 다음은 클래스 값으로 rm을 가진 p 요소를 제거합니다. $( 'p' ).remove( '.rm' ); 다음과 같이 해도 결과는 같습니다. $( 'p.rm' ).remove(); 예제 버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거합니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Reference / .wrap()

개요 .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예를 들어 다음과 같이 하면 p 요소를 div로 감쌉니다. $( 'p' ).wrap( '<div></div>' ); class나 id 값을 추가할 수도 있습니다. $( 'p' ).wrap( '<div id="ab" class="cd"></div>' ); 여러 태그로 감쌀 수도 있습니다. $( 'p' ).wrap( '<div><strong></strong></div>' ); 예제 클래스의 값이 a인 p 요소를 blockquote 태그로 감쌉니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Reference / .removeAttr()

개요 .removeAttr()은 선택한 요소의 특정 속성을 제거합니다. 문법 .removeAttr( attributeName ) 예를 들어 아래는 h1 요소에서 title 속성을 제거합니다. $( 'h1' ).removeAttr( 'title' ); 예제 버튼을 클릭하면 input 요소의 placeholder 속성을 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { ...

jQuery / Reference / .before()

개요 .before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킵니다. 문법 .before( content ) 예제 1 p 요소 앞에 Lorem Ipsum Dolor를 내용으로 갖는 h1 요소를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...