Jquery 자식노드 개수 - jquery jasignodeu gaesu

1.찾은 노드개수 구하기

$대상.length;

ex) var nodeLength = $("div).length;

해당 html의 div 노드의 총 개수를 구함

2.찾은 노드중 n번째 노드 접근하기

$대상.eq(index);

ex) var $div_3 = $("div").eq(3);

해당 html의 div 노드중 세번째 노드의 jQuery객체를 리턴

3.자바스크립트 DOM 객체 접근

$대상.get(index)

ex) var $div_3 = $("div").get(3);

$div_3.style.color = "#f00";

해당 html의 div노드중 세번째의 노드의 DOM객체를 리턴하여 세번째 div의 색을 빨간색으로 바꿨다.

2번(jQuery객체 접근), 3번(DOM객체 접근) 리턴값 비교

위에서 보는것처럼 두 객체가 다르다는 것을 잘 비교하자.

jQuery는 만능이 아니다. jQuery로 할 수 없는건 직접 자바스크립트를 사용하여 처리해야 될 수도 있으므로 이 차이를 잘 알아두자.

다시한번 말하지만 자바스크립트 DOM 작업을 좀더 쉽게 컨트롤하기 위한 라이브러리 임을 알자

(jQuery의 내부는 자바스크립트 DOM과 자바스크립트 문법으로 되어있음을 알자)

4.순차적으로 찾은노드에 접근하기

$대상.each(function(index){

var $target = $(this); OR $대상.eq(index);

});

ex) // jQuery객체를 이용해 변경

$("li").each(function(index){

$(this).html(index + "번째 li");

});

//DOM객체를 이용하여 변경

$("li").each(function(index){

this.innerText = index + "번째 li";

});

해당 html의 모든 li노드를 찾아 몇번째 li인지 텍스트로 나타낸다. (index는 0부터 시작)

- $(this)의 의미

여기서 this는 index 번째의 DOM객체를 의미한다.

그런데 여기에 $()로 감싸 놓았기 때문에 $(index번째 DOM객체) 이므로

$(this)는 index번째 DOM객체를 포장하고있는 jQuery객체란 뜻이다.

로그를 통해 보면 쉽게 알 수 있다.

5.찾은 노드 중에서 특정 노드만 찾기

$대상.filter("선택자")

찾은 노드 중에서 특정 노드만을 사용 싶을때 사용

ex) $("li").filter(".test").html("테스트클래스를 가지고 있는 li입니다.");

해당 html안의 모든 li노드 객체중에서 test라는 클래스를 가진 li만 "텍스트를 테스트클래스를 가지고 있는 li입니다." 라고 변경

6.찾은노드의 자손 노드 중 특정 노드 찾기

$대상.find("선택자")

찾은 노드의 하위(자식,자손)노드를 모두 검색한다.

그렇기 때문에 바로 한단계 하위(자식)노드를 찾고 싶으면 children() 메서드를 사용

filter()와 find()의 차이는 filter()는 현재 노드 중에서 찾아내고 find는 현재 노드를 제외한 하위노드 중에서 찾아낸다.

ex) var $ul = $("ul");

$ul.find(".test").html("ul의 하위 노드중 test라는 클래스를 가진 노드");

해당 html안의 모든 ul노드의 하위 객체중 test라는 클래스를 가진 노드의 텍스트를 바꿔준다.

7.인덱스 값 구하기

$대상.index()

ex) $("li").click(function(){

alert("클릭한 li의 인덱스는 " + $(this).index() +"입니다.")

});

$목록.index(대상DOM)

ex) var $li = $("li");

$li.click(function(){

alert("클릭한 li의 인덱스는 " + $li.index(this) +"입니다.");

})

해당 html의 클릭한 li노드의 인덱스를 알려준다.

게시글 관리

구독하기달달한 디버깅

저작자표시

'플밍 is 뭔들 > JavaScript&jQuery' 카테고리의 다른 글

[jQuery] 부모 노드 찾기, 형제 노드 찾기 (0)2017.07.09[jQuery] 자식 노드 찾기 (0)2017.07.09[jQuery] 노드 찾기 (0)2017.07.09[jQuery] $()란? (0)2017.07.08[JavaScript&Query] $(document).ready 와 window.onload의 차이 (0)2017.07.08

이 방법을 사용하면 쉽게 자식요소가 몇 개인지 알수 있죠. 여기서 자식요소의 엘리먼트 element의 값인 개수를 구하며 텍스트 등의 노드 개수를 구하는 것은 아닙니다. 그럼 아래에서 예제를 통해 더 알아봅니다.

# childElementCount 프로퍼티 예제보기만약 아래와 같은 div 엘리먼트가 존재하는 경우 자식 요소의 전체 개수를 구할 수 있겠죠.

web
is all
free

이제 자바스크립트로 개수를 콘솔 영역에 출력해볼까요?

var ele = document.getElementById('myTest');
var eleCount = ele.childElementCount;

console.log(eleCount);

코드를 실행하면 아래와 같이 출력됩니다.

간단하죠? 여기서 두 번째 span태그에서는 b라는 태그가 안에 있지만 자식의 자식 요소가 포함되지는 않으므로 알아두시기 바랍니다. 작 바로 아래의 자식요소의 개수만 반환합니다.

! 브라우저 호환성참고로 childElementCount는 IE 9 이상과 최신 브라우저에서 잘 동작합니다.

:nth-child()는 형제 요소 중 an+b번째 요소들을 선택하는 선택자입니다. 문법 $( ':nth-child(an+b)' ) a와 b는 상수, n은 변수입니다. n에는 음이 아닌 정수(0, 1, 2, 3, ···)가 차례대로 대입됩니다. an+b 대신에 even, odd를 사용할 수 있습니다. 예제 $( 'ol li:nth-child(2)' ) ol 요소의 자식 요소인 li의 형제 요소 중에서 두 번째 요소를 선택합니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Property / .length - 선택한 요소의 개수를 반환하는 속성

.length .length는 선택한 요소의 개수를 반환하는 속성입니다. 예를 들어 $( 'div' ).length 는 div 요소의 개수입니다. 예제 버튼을 클릭하면 li 요소의 개수를 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.js"></script> <script> $( document ).ready( function() { ...

jQuery / Method / .remove() - 선택한 요소를 제거하는 메서드

.remove() .remove()는 선택한 요소를 HTML 문서에서 제거합니다. 문법 .remove( ) 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣습니다. 예를 들어 $( 'p' ).remove( '.rm' ); 은 클래스 값으로 rm을 가진 p 요소를 제거합니다. 다음과 같이 해도 결과는 같습니다. $( 'p.rm' ).remove(); 예제 버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거합니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .scrollTop() - 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정하는 메서드

.scrollTop() .scrollTop()은 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정합니다. 문법 1 .scrollTop() 스크롤바 수직 위치를 가져옵니다. 예를 들어 $( 'div' ).scrollTop(); 는 div 요소의 스크롤바 수직 위치를 가져옵니다. 문법 2 .scrollTop( value ) 스크롤바 수직 위치를 정합니다. 예를 들어 $( 'div' ).scrollTop( 300 ); 은 div 요소의 스크롤바 위치를 위에서 300px로 정합니다. 예제 1 버튼을 클릭하면 div 요소의 스크롤바 위치를 ...

jQuery / HTML 문서와 연결하는 방법, 사용하는 방법

HTML 문서와 연결하기 CDN 이용하기 HTML 문서에 다음 코드를 추가합니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> 3.3.1은 버전입니다. 다른 버전을 사용하고 싶다면 숫자를 변경합니다. 다운로드 받아 연결하기 jQuery 다운로드는 여기에서 합니다. 압축된 파일도 있고, 압축되지 않은 파일도 있습니다. 그리고 HTML 문서에 다음 코드를 추가합니다. <script src="path/jquery-3.3.1.min.js"></script> path와 파일 이름은 적절히 변경합니다. jQuery 사용하기 다음은 ID가 jb인 h1 요소의 색을 빨간색으로 바꾸는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta ...

jQuery / Selector / :has() - 특정 요소를 포함하는 요소를 선택하는 선택자

:has() :has()는 특정 요소를 포함하는 요소를 선택할 때 사용하는 선택자입니다. 문법 $( ':has(selector)' ) 예를 들어 $( 'p:has(span)' ) 은 span 요소를 가지고 있는 p 요소를 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ...

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

.delay() .delay()는 실행 중인 함수를 정해진 시간만큼 중지(연기) 시킵니다. 문법 .delay( duration ) duration에는 중지할 시간이 들어갑니다. 숫자로 정할 때의 단위는 1/1000초이고, slow 또는 fast로 정할 수 있습니다. slow는 600, fast는 200에 해당합니다. 예제 버튼을 클릭하면 문단이 위로 사라졌다가 1초 뒤에 아래로 내려옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / jQuery.noConflict() / 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기

jQuery를 사용할 때 다른 라이브러리와 충돌이 나는 경우가 있습니다. 충돌의 원인은 두 가지로 구분할 수 있습니다. 다른 라이브러리와 충돌 다른 버전의 jQuery와 충돌 각 경우에 대해서 어떻게 충돌을 방지할 수 있는지 알아보겠습니다. 다른 라이브러리와 충돌 jQuery는 $를 jQuery의 alias로 사용합니다. 그런데 다른 라이브러리에서 $를 함수나 변수로 사용한다면 jQuery가 제대로 작동하지 않을 수 있습니다. 이를 방지하는 방법은 ...

jQuery / Method / .hide() - 선택한 요소를 사라지게 하는 메서드

.hide() .hide()는 선택한 요소를 사라지게 합니다. 문법 1 .hide() 선택한 요소를 즉시 사라지게 합니다. 문법 2 .hide( duration ) duration : 사라지는 데 걸리는 시간입니다. slow, fast, 숫자를 넣을 수 있습니다. 숫자의 단위는 1000분의 1초입니다. 기본값은 400입니다. easing : 사라지는 방식입니다. swing과 linear가 가능합니다. 기본값은 swing입니다. complete : 사라진 다음 실행할 함수를 넣을 ...

jQuery / Method / .fadeOut() - 선택한 요소를 서서히 사라지게 하는 메서드

.fadeOut() .fadeOut()은 선택한 요소를 서서히 사라지게 합니다. 문법 .fadeOut( ) duration duration에는 완전히 사라질 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 안에 ...