본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

[jQuery] .contents()

.contents()

선택한 요소와 일치하는 콘텐츠 요소를 선택합니다.


.contents()

.addBack() 메서드는 현재 선택된 요소의 이전 요소를 한번 더 찾아주는 필터링 역할의 메서드입니다.

문법(Syntax)

$("선택자").contents();

정의(Definition)

  • .contents() 메서드는 현재 선택한 요소와 이전 요소에게 동시에 효과를 나타내는 메서드입니다.

Sample1

.contents(selector) : span 태그와 그 이전 요소 li에게 효과를 주는 예제입니다.

Sample1

탐색(Traversing)

  • .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
  • .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.
jquery
$(".choice1 .btn1").on("click", function(e){
    e.preventDefault();
    $(".list1 li").contents().filter(function(){
        return this.nodeType === 1;
    }).wrap("");
});
html
<h3>탐색(Traversing)</h3>
<div class="list1">
    <ul>
        <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li>.filter() 메서드는 선택된 <span>요소</span>에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li>.has() 메서드는 선택된 요소의 자식 <span>요소</span>에서 주어진 선택자를 찾습니다.</li>
        <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
        <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 6px 2px 6px; 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>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li>.filter() 메서드는 선택된 <span>요소</span>에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li>.has() 메서드는 선택된 요소의 자식 <span>요소</span>에서 주어진 선택자를 찾습니다.</li>
            <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
            <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
        </ul>
    </div>
    
    <div class="choice1">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 노드가 한개인 요소에게 효과를 줍니다.</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 li span").removeClass();
        });
        $(".choice1 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list1 li").contents().filter(function(){
                return this.nodeType === 1;
            }).wrap("<span class='bLine'></span>");
        });
    </script>

</body>
</html>

Sample2

.contents(selector) : span 태그와 그 이전 요소 li에게 효과를 주는 예제입니다.

결과

탐색(Traversing)

  • .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
  • .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.
jquery
$(".choice2 .btn1").on("click", function(e){
    e.preventDefault();
    $(".list2").contents().find("span").addClass("rLine");
});
$(".choice2 .btn2").on("click", function(e){
    e.preventDefault();
    $(".list2").contents().find("em").addClass("bLine");
});
html
<h3>탐색(Traversing)</h3>
<div class="list2">
    <ul>
        <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li>.filter() 메서드는 선택된 <span>요소</span>에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li>.has() 메서드는 선택된 요소의 자식 <span>요소</span>에서 주어진 선택자를 찾습니다.</li>
        <li>.is() 메서드는 선택된 요소 <em>객체</em>의 특징을 판별합니다.</li>
        <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 6px 2px 6px; 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>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li>.filter() 메서드는 선택된 <span>요소</span>에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li>.has() 메서드는 선택된 요소의 자식 <span>요소</span>에서 주어진 선택자를 찾습니다.</li>
            <li>.is() 메서드는 선택된 요소 <em>객체</em>의 특징을 판별합니다.</li>
            <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
        </ul>
    </div>
    
    <div class="choice2">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>span</em> 태그에 효과를 줍니다.</a>
        <a href="#" class="btn2">클릭하면 <em>em</em> 태그에 효과를 줍니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice2 .off1").on("click", function(e){
            e.preventDefault();
            $(".list2 li span, .list2 li em").removeClass();
        });
        $(".choice2 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list2").contents().find("span").addClass("rLine");
        });
        $(".choice2 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list2").contents().find("em").addClass("bLine");
        });
    </script>

</body>
</html>

더보기

인스타그램 보기 바로가기

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

유튜브 영상보기 바로가기