[jQuery] .find()

티스토리 뷰

jQuery

[jQuery] .find()

.find()

선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.

.find()

선택한 요소의 자식 요소 중 조건에 맞는 요소를 선택합니다.

문법(Syntax)

$("선택자").find("선택자");
$("선택자").find("요소");

정의(Definition)

.find("선택자") : 선택한 요소의 자식 요소 중 선택자를 통해 선택합니다.
.find("요소") : 선택한 요소의 자식 요소 중 요소를 통해 선택합니다.

비교(Compare)

.children() : 바로 아래 자식만 선택합니다.
.find() : 모든 자식 중에서 선택합니다.

Sample1

선택한 요소의 자식 요소를 선택합니다. 태그를 통하여 원하는 요소를 선택할 수 있습니다.

결과

탐색(Traversing)

.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.
- 첫번째 자식입니다.
- 첫번째 자식입니다.
.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
- 첫번째 자식입니다.
- 첫번째 자식입니다.
  - 두번째 자식입니다.
  - 두번째 자식입니다.
.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.

리셋 클릭하면 select자식 요소를 선택합니다. 클릭하면 span 태그를 선택합니다.

jquery

$(".list li").find("li").addClass("rLine");
$(".list li").find("span").addClass("rLine");

html

<h3>탐색(Traversing)</h3>
    <div class="list">
        <ul>
            <li class="select">.children() 메서드는 선택한 요소의 모든 <span>자식</span>을 선택합니다.
                <ul>
                    <li>첫번째 <span>자식</span>입니다.</li>
                    <li>첫번째 <span>자식</span>입니다.</li>
                </ul>
            </li>
            <li class="select">.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
                <ul>
                    <li>첫번째 <span>자식</span>입니다.</li>
                    <li>첫번째 <span>자식</span>입니다.
                        <ul>
                            <li>두번째 <span>자식</span>입니다.</li>
                            <li>두번째 <span>자식</span>입니다.</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>.find() 메서드는 선택한 요소에서 조건에 맞는 <span>요소</span>를 다시 선택합니다.</li>
            <li>.next() 메서드는 선택한 요소의 다음 <span>요소</span>를 선택합니다.</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;}
        .choice 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="list">
        <ul>
            <li class="select">.children() 메서드는 선택한 요소의 모든 <span>자식</span>을 선택합니다.
                <ul>
                    <li>첫번째 <span>자식</span>입니다.</li>
                    <li>첫번째 <span>자식</span>입니다.</li>
                </ul>
            </li>
            <li class="select">.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
                <ul>
                    <li>첫번째 <span>자식</span>입니다.</li>
                    <li>첫번째 <span>자식</span>입니다.
                        <ul>
                            <li>두번째 <span>자식</span>입니다.</li>
                            <li>두번째 <span>자식</span>입니다.</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>.find() 메서드는 선택한 요소에서 조건에 맞는 <span>요소</span>를 다시 선택합니다.</li>
            <li>.next() 메서드는 선택한 요소의 다음 <span>요소</span>를 선택합니다.</li>
        </ul>
    </div>
    
    <div class="choice">
        <a href="#c" class="off1">리셋</a>
        <a href="#c" class="btn1">클릭하면 자식 요소(li)를 선택합니다.</a>
        <a href="#c" class="btn2">클릭하면 span 태그를 선택합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice .off1").on("click", function(e){
            e.preventDefault();
            $(".list li, span").removeClass("rLine");
        });
        $(".choice .btn1").on("click", function(e){
            e.preventDefault();
            $(".list li").find("li").addClass("rLine");
        });
        $(".choice .btn2").on("click", function(e){
            e.preventDefault();
            $(".list li").find("span").addClass("rLine");
        });
    </script>

</body>
</html>

Sample2

모든 텍스트 요소를 span 태그로 감싸줍니다. 마우스를 오버하면 span 태그를 찾아 마우스오버 효과를 줍니다.

결과

관찰 중심의 사용자 조사 방법

UI/UX 관련 조사 목표에 최적화된 결과를 얻기 위해서는 다양한 조사 기법별 특성을 이해 하여야 한다. 프로젝트에 한정된 조사 예산 및 조사 일정을 고려하여야 하며 특히, 사용자 를 둘러싼 환경의 다변화, 연구 방법론의 발달 등으로 인하여 어느 한 가지 조사 기법을 사용하기보다는 다양한 방법들을 서로 융합하여 사용하기도 한다.

마우스를 오버하면 효과가 나타납니다.

jquery

var text = $( ".list2 p" ).text().split(" ").join("</span> <span>");
text = "<span>" + text + "</span>";

$(".list2 p").html(text).find("span").hover(function(){
    $(this).addClass( "rLine" );
}, function() {
    $(this).removeClass( "rLine" );
});

html

<h3>관찰 중심의 사용자 조사 방법</h3>
<div class="list2">
    <p>UI/UX 관련 조사 목표에 최적화된 결과를 얻기 위해서는 다양한 조사 기법별 특성을 이해 하여야 한다. 프로젝트에 한정된 조사 예산 및 조사 일정을 고려하여야 하며 특히, 사용자 를 둘러싼 환경의 다변화, 연구 방법론의 발달 등으로 인하여 어느 한 가지 조사 기법을 사용하기보다는 다양한 방법들을 서로 융합하여 사용하기도 한다.</p>
</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 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        .choice2 a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>관찰 중심의 사용자 조사 방법</h3>
    <div class="list2">
        <p>UI/UX 관련 조사 목표에 최적화된 결과를 얻기 위해서는 다양한 조사 기법별 특성을 이해 하여야 한다. 프로젝트에 한정된 조사 예산 및 조사 일정을 고려하여야 하며 특히, 사용자 를 둘러싼 환경의 다변화, 연구 방법론의 발달 등으로 인하여 어느 한 가지 조사 기법을 사용하기보다는 다양한 방법들을 서로 융합하여 사용하기도 한다.</p>
    </div>
    
    <div class="choice2">
        <a href="#c">모든 글씨를 span으로 감싸주고 마우스 오버 효과를 주었습니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        var text = $( ".list2 p" ).text().split(" ").join("</span> <span>");
            text = "<span>" + text + "</span>";
        
        $(".list2 p").html(text).find("span").hover(function(){
              $(this).addClass( "rLine" );
            }, function() {
              $(this).removeClass( "rLine" );
            });
    </script>

</body>
</html>

Sample3

모든 텍스트 요소를 span 태그로 감싸줍니다. 컨텐츠 요소에서 원하는 글씨를 선택 후 효과를 줍니다.

Sample3

친화도법(affinity diagram)

친화도법은 심층인터뷰나 포커스 그룹 인터뷰와 같이 정성적 조사 수행 결과로 얻은 질적 인 데이터를 분석(qualitative data analysis)하는 기법이다. 설문조사와 같은 정량적 조사가 비교적 간단히 통계 분석을 이용해 데이터를 처리하는 것과 다르게 정성적 조사 결과를 통해 얻는 데이터들은 통계처리가 불가하다. 정성적조사결과를 통해 나온 많은 양의 인터뷰 내용기록, 음성기록, 사진, 촬영기록물등의 데이터는 이로부터 도출된 추가 적발 견사항이나 시사점 등이 더해지게 되는데, 이러한 방대한 자료를 분석하기 위해서는 상당 한 인력과 시간이 소요될 수밖에 없다. 친화도법은 이러한 광범위한 데이터를 모으고 카드 화하여 도해화하는 과정을 거치는데 카드 간의 친화성을 근거로 방향성을 밝힐 수 있게 하도록 고안된 기법이다.

리셋 클릭하면 데이터라는 글씨만 선택하여 효과를 주었습니다. 클릭하면 친화도법이라는 글씨만 선택하여 효과를 주었습니다.

jquery

$(".list3 p").html(text).find(":contains('데이터')").addClass("rLine");
$(".list3 p").html(text).find(":contains('친화도법')").addClass("bLine");

html

 <h3>친화도법(affinity diagram)</h3>
    <div class="list3">
        <p>친화도법은 심층인터뷰나 포커스 그룹 인터뷰와 같이 정성적 조사 수행 결과로 얻은 질적 인 데이터를 분석(qualitative data analysis)하는 기법이다. 설문조사와 같은 정량적 조사가 비교적 간단히 통계 분석을 이용해 데이터를 처리하는 것과 다르게 정성적 조사 결과를 통해 얻는 데이터들은 통계처리가 불가하다. 정성적조사결과를 통해 나온 많은 양의 인터뷰 내용기록, 음성기록, 사진, 촬영기록물등의 데이터는 이로부터 도출된 추가 적발 견사항이나 시사점 등이 더해지게 되는데, 이러한 방대한 자료를 분석하기 위해서는 상당 한 인력과 시간이 소요될 수밖에 없다. 친화도법은 이러한 광범위한 데이터를 모으고 카드 화하여 도해화하는 과정을 거치는데 카드 간의 친화성을 근거로 방향성을 밝힐 수 있게 하도록 고안된 기법이다.</p>
    </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 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        .bLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .choice3 a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>친화도법(affinity diagram)</h3>
    <div class="list3">
        <p>친화도법은 심층인터뷰나 포커스 그룹 인터뷰와 같이 정성적 조사 수행 결과로 얻은 질적 인 데이터를 분석(qualitative data analysis)하는 기법이다. 설문조사와 같은 정량적 조사가 비교적 간단히 통계 분석을 이용해 데이터를 처리하는 것과 다르게 정성적 조사 결과를 통해 얻는 데이터들은 통계처리가 불가하다. 정성적조사결과를 통해 나온 많은 양의 인터뷰 내용기록, 음성기록, 사진, 촬영기록물등의 데이터는 이로부터 도출된 추가 적발 견사항이나 시사점 등이 더해지게 되는데, 이러한 방대한 자료를 분석하기 위해서는 상당 한 인력과 시간이 소요될 수밖에 없다. 친화도법은 이러한 광범위한 데이터를 모으고 카드 화하여 도해화하는 과정을 거치는데 카드 간의 친화성을 근거로 방향성을 밝힐 수 있게 하도록 고안된 기법이다.</p>
    </div>
    
    <div class="choice3">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 데이터라는 글씨만 선택하여 효과를 주었습니다.</a>
        <a href="#" class="btn2">클릭하면 친화도법이라는 글씨만 선택하여 효과를 주었습니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        var text = $( ".list3 p" ).text().split(" ").join("</span> <span>");
            text = "<span>" + text + "</span>";
        
        $(".choice3 .off1").on("click", function(e){
            e.preventDefault();
            $(".list3 p span").removeClass();
        });
        
        $(".choice3 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list3 p").html(text).find(":contains('데이터')").addClass("rLine")
        });
        $(".choice3 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list3 p").html(text).find(":contains('친화도법')").addClass("bLine")
        });
    </script>



</body>
</html>

호환성(Compatibility)

메서드	버전						6	7	8	9	10	11
children()	jQeury 1.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
	jQeury 2.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
	jQeury 3.x 버전	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능