$.unique()로 중복 제거가 안되네요.

조회수 49회
    <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>

스크립트 주석부분은 제가 해석한 건데 출력 예상결과로는 중복값이 다 삭제된 채로 출력이되어야 된다구 생각이 되는데 결과값은 중복값 포함되서 출력이 되었습니다....해석이 잘못된 부분이 있을까요?

  • 제목 좀 잘 달아주세요. daewon 2020.2.7 14:25
  • 제목이요...?어떤제목을 말씀하시는지... ki,, 2020.2.7 14:27
  • 지금 뭔가 질문하는 글의 제목이 "질문있습니다 ~!"잖아요 이게 동어반복이거든요. 무슨 질문인지 요약된 좋은 제목으로 바꿔주시면 좋을거 같네요. 엽토군 2020.2.7 14:30
  • 아~네 알겠습니다 다음부턴 참고해서 올릴께요 감사합니다.~ ki,, 2020.2.7 14:32

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() <= 선택자가 안먹히는건가요? ki,, 2020.2.7 15:19
    • 정확히는, 지금 확인하고 있는 총8개의 li 객체가 사실은 모두 다 각자 고유한 거지요. 그래서 unique()는 "먹혔지만", 불행히도 그 결과가 고유한 총 8개의 li 객체들인 겁니다. 클래스명, innertext 잘 확인해 보시고 잘 생각해 보세요. 엽토군 2020.2.7 17:14

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.