[jquery] 특정태그 선택 / xml 파싱 / $.parseXML()

- $.parseXML( ) 메서드와 each( ) 메서드, find() 메서드

 

        $(document).ready(function() {
            
            // xml 문서 구조의 문자열 
            var xmlStr = '';
            xmlStr += '<links>';
            xmlStr += '     <link>';
            xmlStr += '         <name>네이버</name>';            
            xmlStr += '         <url>http://www.naver.com</url>';            
            xmlStr += '     </link>';
            xmlStr += '     <link>';
            xmlStr += '         <name>구글</name>';            
            xmlStr += '         <url>http://www.google.com</url>';            
            xmlStr += '     </link>';
            xmlStr += '     <link>';
            xmlStr += '         <name>다음</name>';            
            xmlStr += '         <url>http://www.daum.net</url>';            
            xmlStr += '     </link>';
            xmlStr += '</links>';
            
            // 문자열 > xml 문서 객체로 만듦
            var xmlDoc = $.parseXML(xmlStr);
            
            // xml문서 객체 > 제이쿼리 객체로 만듦 > find() 사용 가능
            $(xmlDoc).find('link').each(function(index){
                // <link></link>가 하나의 this가 된다.
                var name = $(this).find('name').text();
                var url = $(this).find('url').text();
                
                var html ='';
                html += '<div class="card">';
                html += '   <h2>'+name+'</h2>';
                html += '   <a href="'+url+'">방문하기</a>';
                html += '</div>';
                
                $('body').html(html+$('body').html());
            });
            
      
        });

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div.card{
            border : 1px solid #aaa;
            width: 30%;
            float : left;
            margin: 5px;
        }
        
        
        div.card > h2 {
            background-color: palevioletred;            
            text-align: center;
        }
        
        div.card > a{
            display: block;
            text-align: center;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            color : black;
            background-color: pink;
        }
    </style>