본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

[jQuery] .closest()

WEB'S 2018. 8. 3. 16:39

.closest()

선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.

.closest()

선택한 요소를 포함하면서 가장 가까운 상위 요소를 선택합니다.

문법(Syntax)

$("선택자").closest("선택자");
$("선택자").closest("변수");

정의(Definition)

  • 선택한 요소 중 가장 가까운 상위 요소 선택자(태그,아이디,클래스)를 통해 선택합니다.
  • 선택한 요소 중 가장 가까운 상위 요소 중 변수를 통해 선택합니다.

Sample1

선택한 요소 중 가장 가까운 요소를 선택합니다.

결과

탐색(Traversing)

  • .children() 메서드는 선택한 요소의 모든 자식을 선택합니다.
    • 첫번째 자식입니다.
    • 첫번째 자식입니다.
  • .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
    • 첫번째 자식입니다.
    • 첫번째 자식입니다.
      • 두번째 자식입니다.
      • 두번째 자식입니다.
  • .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
  • .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
리셋 클릭하면 select의 가장 가까운 상위 요소li를 선택합니다. 클릭하면 select의 가장 가까운 상위 요소ul를 선택합니다.
jquery
$("li.select").closest("li").addClass("rLine");
$("li.select").closest("ul").addClass("rLine");
html
<h3>탐색(Traversing)</h3>
<div class="list1">
    <ul>
        <li>.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.
            <ul>
                <li class="select">첫번째 자식입니다.</li>
                <li>첫번째 자식입니다.</li>
            </ul>
        </li>
        <li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
            <ul>
                <li>첫번째 자식입니다.</li>
                <li>첫번째 자식입니다.
                    <ul>
                        <li class="select">두번째 자식입니다.</li>
                        <li>두번째 자식입니다.</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="select">.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
        <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li.select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list1">
        <ul>
            <li>.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.
                <ul>
                    <li class="select">첫번째 자식입니다.</li>
                    <li>첫번째 자식입니다.</li>
                </ul>
            </li>
            <li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
                <ul>
                    <li>첫번째 자식입니다.</li>
                    <li>첫번째 자식입니다.
                        <ul>
                            <li class="select">두번째 자식입니다.</li>
                            <li>두번째 자식입니다.</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="select">.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
            <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
        </ul>
    </div>
    
    <div class="choice1">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>select</em>의 가장 가까운 상위 요소<em>li</em>를 선택합니다.</a>
        <a href="#" class="btn2">클릭하면 <em>select</em>의 가장 가까운 상위 요소<em>ul</em>를 선택합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice1 .off1").on("click", function(e){
            e.preventDefault();
            $(".list1 li, .list1 ul").removeClass("rLine");
        });
        $(".choice1 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list1 li.select").closest("li").addClass("rLine");
        });
        $(".choice1 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list1 li.select").closest("ul").addClass("rLine");
        });
    </script>

</body>
</html>

Sample2

선택한 요소의 가장 가까운 상위 요소를 선택합니다.

결과

탐색(Traversing)

  • .children() 메서드는 선택한 요소의 모든 자식을 선택합니다.
  • .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
  • .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
  • .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
  • .eq() 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
리스트를 클릭하면 가장 가까운 ul 요소에게 효과를 줍니다.
jquery
$(".list2 li").on("click", function(event){
  $(event.target).closest("ul").toggleClass("rLine");
});
html
<h3>탐색(Traversing)</h3>
<div class="list2">
    <ul>
        <li>.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>
        <li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
        <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
        <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
    </ul>
    <ul>
        <li>.eq() 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li>.filter() 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li>.first() 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li>.has() 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li.select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list2">
        <ul>
            <li>.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>
            <li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
            <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
            <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
        </ul>
        <ul>
            <li>.eq() 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li>.filter() 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li>.has() 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        </ul>
    </div>
    
    <div class="choice2">
        리스트를 클릭하면 가장 가까운 ul 요소에게 효과를 줍니다.
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".list2 li").on("click", function(event){
          $(event.target).closest("ul").toggleClass("rLine");
        });
    </script>

</body>
</html>

Sample3

선택한 요소의 가장 가까운 상위 요소를 변수를 통해 선택합니다.

결과

탐색(Traversing)

  • .children() 메서드는 선택한 요소의 모든 자식을 선택합니다.
  • .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
  • .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
  • .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
  • .eq() 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
select를 클릭하면 가장 가까운 상위 요소li를 변수를 통해 선택합니다.
jquery
var span = $(".list3 li");
$(".list3 li span").on("click", function(event){
    $(event.target).closest(span).toggleClass("rLine");
});
html
<h3>탐색(Traversing)</h3>
<div class="list3">
    <ul>
        <li>.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>
        <li>.closest() 메서드는 선택한 요소의 상위 <span class="select">요소</span> 중 가장 가까운 요소를 선택합니다.</li>
        <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
        <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
    </ul>
    <ul>
        <li>.eq() 선택한 요소에 인덱스 번호에 해당하는 <span class="select">요소</span>를 찾습니다.</li>
        <li>.filter() 선택된 요소에서 선택하거나 <span class="select">함수</span>를 사용할 수 있습니다.</li>
        <li>.first() 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li>.has() 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list3">
        <ul>
            <li>.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>
            <li>.closest() 메서드는 선택한 요소의 상위 <span class="select">요소</span> 중 가장 가까운 요소를 선택합니다.</li>
            <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
            <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
        </ul>
        <ul>
            <li>.eq() 선택한 요소에 인덱스 번호에 해당하는 <span class="select">요소</span>를 찾습니다.</li>
            <li>.filter() 선택된 요소에서 선택하거나 <span class="select">함수</span>를 사용할 수 있습니다.</li>
            <li>.first() 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li>.has() 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        </ul>
    </div>
    
    <div class="choice3">
        <em>li</em>를 클릭하면 가장 가까운 상위 요소를 선택합니다.
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        var span = $(".list3 li");
        $(".list3 li span").on("click", function(event){
          $(event.target).closest(span).toggleClass("rLine");
        });
    </script>

</body>
</html>

JQUERY Related Articles

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기

Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바