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

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

 

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

Get the values of all inputs with same class as an array

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set

Set - JavaScript | MDN