JQuery&Javascript

[JQuery] - 셀렉터 : parent(), children(), find(), prev(), next()

Riucc 2019. 5. 3. 13:35

○ 셀렉터 : parent(), children(), find(), prev(), next() 

 

- 셀렉터 : parent(), children(), find(), prev(), next()

     같은 클래스 이름으로 버튼이 여러개고 또 

     같은 클래스 이름을 가진 text 태그가 여러개일 경우

     특정이벤트 발생시 특정 태그를 찾아가는 방법


     parent() : 해당 태그의 부모 태그를 찾는다

     children() : 해당 태그의 자식 태그를 찾는다

     find() : 클래스 안에 구체적으로 태그를 찾는다

     prev() : 해당 태그의 이전 태그를 찾는다

     next() : 해당 태그의 다음 태그를 찾는다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
 
<body>
    <div class="class1">
        txt1 : <input type="text" id="txt1" />
    </div>
 
    <div class="class2">
        txt2 : <input type="text" id="txt2" />
        txt3 : <input type="text" id="txt3" />
    </div>
 
    <input type="button" id="btnClick" value="일괄처리" /> <br/><br/>
 
    <textarea id="txtarea"></textarea>
 
    <script type="text/javascript">
        $(function () {
            $('#btnClick').click(function () {
                // --- .val() 로 해당 태그의 벨류 값을 가져옴 ---
                // --- .val(" ") 로 값을 해당 태그에 넣어줌 ---
 
                // parent() : 해당 태그의 부모 태그를 찾는다
                var a = $('#txt1').parent().val();
 
                // children() : 해당 태그의 자식 태그를 찾는다
                var a2 = $('.class1').children().val();
 
                // find() : 이용하여 클래스 안에 태그를 찾을 때 사용
                var b = $('.class2').find('#txt2').val();
 
                // next() : 해당 태그의 다음 태그를 찾는다
                var c = $('#txt2').next().val();
 
                // prev() : 해당 태그의 이전 태그를 찾는다
                var d = $('#txt3').prev().val();
 
                $('#txtarea').val(a + " / " + a2 + " / " + 
+ " / " + c + " / " + d);
            });
        });
    </script>
</body>
cs