$.unique()로 중복 제거가 안되네요.
조회수 789회
<ol>
<li class="horses">Thoroughbred</li>
<li class="horses">Arabian</li>
<li class="horses">Brlgian</li>
<li class="horses">Percheron</li>
<li class="horses">Arabian</li>
<li class="animals">Brlgian</li>
<li class="animals">dog</li>
<li class="animals">cat</li>
</ol>
<ul id="animals"></ul>
<script>
$(document).ready(function(){
var animals = $('li.animals').get(); //.animals클래스 값을 배열로 변수대입
var horses = $('li.horses').get(); //.horses클래스 값을 배열로 변수대입
var tmp = $.merge( animals, horses); //첫번째 클래스 배열과 2번째 클래스 배열을 합쳐 tmp 변수에 대입
tmp = $.unique(tmp); //tmp 변수의 중복된 값을 삭제한다
$('#animals').append($(tmp).clone()); //ul 의 id 값에 변수 tmp 를 추가한다.
});
/* 예상 결과
Thoroughbred
Arabian
Brlgian
Percheron
dog
cat
*/
/*출력된 결과값
Thoroughbred
Arabian
Brlgian
Percheron
Arabian
Brlgian
dog
cat
*/
</script>
스크립트 주석부분은 제가 해석한 건데 출력 예상결과로는 중복값이 다 삭제된 채로 출력이되어야 된다구 생각이 되는데 결과값은 중복값 포함되서 출력이 되었습니다....해석이 잘못된 부분이 있을까요?
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
1 답변
-
.get()
이 반환하는 배열은 DOM 엘리먼트들의 배열이지 그 엘리먼트들의innerHTML
의 배열이 아닙니다. 따라서 의도하신 바 DOM 객체들의 내용이 유니크한 것만 걸러낸다는 의도는 실패하고 있는 것입니다.어떻게 알았냐구요? 몰랐습니다 저도 문서 다시 읽어보고 콘솔에 디버그 출력 뿌려보고 그러는 거지요.
console.log(tmp);
를tmp = $.unique(tmp);
전후에 찍어 보시면 이런게 나옵니다.(8) [li.animals, li.animals, li.animals, li.horses, li.horses, li.horses, li.horses, li.horses] (8) [li.horses, li.horses, li.horses, li.horses, li.horses, li.animals, li.animals, li.animals]
저라면 복잡하게 생각 안하고 이렇게 돌릴것 같네요.
let newBarn = document.getElementById('animals'); let livestock = document.querySelectorAll('#barn li'); let uniqueLivestock = []; // 유니크한 값들만 저장할 목록 for (i = 0; i < livestock.length; i++) { if (uniqueLivestock.indexOf(livestock[i].innerText) < 0) { // 목록에 없다면 uniqueLivestock.push(livestock[i].innerText); // 목록에 기입하고 newBarn.innerHTML += '<li>' + livestock[i].innerText + '</li>'; // 새 헛간에 들인다. } }
- 아 ..어렵네요...그럼 .get() 는 DOM 의객채로 반환되니까 $.unique() <= 선택자가 안먹히는건가요? 알 수 없는 사용자 2020.2.7 15:19
- 정확히는, 지금 확인하고 있는 총8개의 li 객체가 사실은 모두 다 각자 고유한 거지요. 그래서 unique()는 "먹혔지만", 불행히도 그 결과가 고유한 총 8개의 li 객체들인 겁니다. 클래스명, innertext 잘 확인해 보시고 잘 생각해 보세요. 엽토군 2020.2.7 17:14
댓글 입력