[JS][JQuery] 속성 data-value 가져오는 방법

예시로 살펴보자.

 

<ul id="ul">
    <li data-value="s01">전체</li>
    <li data-value="s02">국내 도서</li>
    <li data-value="s03">외국 도서</li>
</ul>

<ul id="value"></ul>

 

1. JS 코드

1. getAttribute() 함수 사용

<script>
    var html = '';
    var ul = document.getElementById('ul');
    var liItems = ul.getElementsByTagName('li');

    console.log(liItems);

    for(var i=0; i<liItems.length; i++) {
        var value = liItems[i].getAttribute('data-value');

        html += '<li>'+value+'</li>';
    }

    document.getElementById('value').innerHTML += html;
</script>

 

▼ 콘솔창 확인

 

 

2. JQuery 코드

1. data() 함수 사용

<script>
    var html = '';

    $('#ul').children('li').each(function() {
        var value = $(this).data('value');

        html += '<li>'+value+'</li>';
    });

    $('#value').append(html);
</script>

 

2. attr() 함수 사용

<script>
    var html = '';

    $('#ul').children('li').each(function() {
        var value = $(this).attr('data-value');

        html += '<li>'+value+'</li>';
    });

    $('#value').append(html);
</script>

 

▼ 화면 확인

 

• 전체
• 국내 도서
• 외국 도서

• s01
• s02
• s03