.addBack()

jQuery Reference

.addBack()은 현재 선택 집합에 탐색 스택의 바로 이전 집합을 합칩니다. 예를 들어 .find()로 자식을 찾은 뒤 부모도 함께 꾸미려는 경우에 사용합니다.

문법과 적용 범위

$(".panel").find(".item").addBack();
$(".panel").find(".item").addBack(".selected");

jQuery 탐색 메서드는 새 집합을 반환하면서 이전 집합을 기억합니다. .addBack()은 전체 탐색 이력이나 모든 조상 요소를 자동으로 합치지 않습니다. 인수로 선택자를 지정하면 바로 이전 집합만 그 선택자로 걸러 합칩니다. 현재 집합은 이 선택자로 필터링되지 않는다는 점이 중요합니다.

jQuery 공식 문서의 .addBack() 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery addBack 예제</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div class="panel selected" id="a"><p class="item">첫 항목</p></div>
<div class="panel" id="b"><p class="item">둘째 항목</p></div>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      const $result = $(".panel").find(".item").addBack(".selected");
      $result.addClass("marked");
      $("#output").text("선택 수: " + $result.length);
    });
  </script>
</body>
</html>

실행 결과 확인

두 item 문단과 selected 클래스가 있는 a 패널이 강조됩니다. b 패널은 합쳐지지 않아 결과는 선택 수: 3입니다. .addBack()의 인수를 제거하면 두 패널과 두 항목이 모두 포함됩니다.

사용할 때 주의할 점

.find().filter()처럼 탐색을 더 이어 붙이면 바로 이전 집합이 달라집니다. 합치려는 지점 바로 뒤에서 .addBack()을 호출하거나 필요한 집합을 변수에 보관하세요.
.end()는 이전 집합으로 돌아가는 메서드이고 .addBack()은 이전 집합을 현재 집합에 합치는 메서드입니다.
새로 $(...)를 호출해 객체를 다시 만들면 앞선 탐색 스택을 공유하지 않습니다. 임의의 별도 대상을 추가하려면 .add()가 적합합니다.

용도를 비교하려면 .add()로 별도 대상 합치기, .find()로 자식 탐색하기을 참고하세요.

jQuery Reference