웹프로그래밍

Global It Leader!!


jQuery


 
 

[Javascript / jQuery] Set 객체를 활용한 동일 Class 값 중복 체크

페이지 정보

작성자 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 1,523회 작성일 22-03-26 22:00

본문

html 마크업에서는 Class 명을 부여해 해당 엘레멘트를 통합적으로 조작할 수 있다.

 

<input class="row" value="1"/>
<input class="row" value="2"/>
<input class="row" value="3"/>
<input class="row" value="3"/>
<input class="row" value="5"/>

이렇게 5개의 input 태그로 구성된 html이 있다면 해당 값을 가져오기 위해

 

<script type="javascript">
	let rowValue = document.getElementsByClassName('row'); //NodeList를 return
    console.log(rowValue[0]); //첫번째 'row' class value return
</script>

자바스크립트로는 다음과 같이 표현할 수 있다.

 

<script type="javascript">
    let rows = $('.row'); //전체 row 인스턴스 
    console.log($(rows[2]).val()); //3번째 값
    
    let rowValue = $('.row').val(); // 1개만 출력됨
</script>

Jquery에서는 이렇게 표현할 수 있다. val() 함수를 바로 써버리면 한개의 값만 리턴하니 조심하자.

또한 jquery 에서는 반복문을 쓰지 않고 each() 함수를 통해 각각의 Class에 대한 엘리먼트를 참조할 수 있는데

 

<script type="javascript">
    let rows = $('.row'); //전체 row 인스턴스 
    
    for(let i=0;i<rows.length;i++){
    	console.log($(rows[i]).val()); //1 2 3 3 5
    }
    
    rows.each(function(){
    	console.log($(this).val()); //1 2 3 3 5
    });
</script>

 

이렇게 표현 할 수도 있다. 자 이제 본격적으로 값을 담기 위해 빈 배열을 선언해 값을 넣어준다.

 

<script type="javascript">
    let rows = $('.row'); //전체 row 인스턴스 
    let rowArr = [];
    
    rows.each(function(){
    	rowArr.push($(this).val());
    });
    
    console.log(rowArr) // [1,2,3,3,5]
    
</script>

 

그리고 Set 객체를 만드는데 Set 객체는 Iterable을 파라미터로 받으며 중복을 허용하지 않는 Collection 이기 때문에 다음과 같이 할당된다.

<script type="javascript">
    let rows = $('.row'); //전체 row 인스턴스 
    let rowArr = [];
    
    rows.each(function(){
    	rowArr.push($(this).val());
    });
    
    console.log(rowArr); // [1,2,3,3,5]
    
    let rowArr2 = new Set(rowArr);
    
    console.log(rowArr2); // [1,2,3,5]
    
</script>

 

따라서 최종적으로 이 2개의 length를 비교해서 중복체크를 하면 되겠다.

 

<script type="javascript">
    let rows = $('.row'); //전체 row 인스턴스 
    let rowArr = [];
    
    rows.each(function(){
    	rowArr.push($(this).val());
    });
    
    console.log(rowArr); // [1,2,3,3,5]
    
    let rowArr2 = new Set(rowArr);
    
    console.log(rowArr2); // [1,2,3,5]
    
    if(rowArr.length !== rowArr2.size)
    	alert('중복발생!');
    
    
</script>

 

 

<참조>

https://stackoverflow.com/questions/19247727/get-the-values-of-all-inputs-with-same-class-as-an-array/19247846

댓글목록

등록된 댓글이 없습니다.

전체 142
게시물 검색
jQuery 목록
번호 제목 글쓴이 조회 날짜
142 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 389 07-06
141 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 618 01-05
140 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 704 12-07
139 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1228 03-31
138 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1235 03-28
137 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1224 03-27
136 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1651 03-27
135 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1215 03-27
134 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1251 03-27
열람중 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1524 03-26
132 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1237 03-26
131 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1384 03-26
130 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2662 03-26
129 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1865 03-26
128 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1426 03-26
127 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1609 03-26
126 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1855 03-26
125 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1255 03-26
124 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1189 03-26
123 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1346 03-26