[Javascript / jQuery] Set 객체를 활용한 동일 Class 값 중복 체크
페이지 정보
작성자 운영자쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 1,720회 작성일 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>
<참조>
댓글목록
등록된 댓글이 없습니다.