[js] $div.data(item)

 

$div.data(item);

 

📌 왜 사용할까요?

1. 데이터의 분류 및 분류
   • item저장소 DOM 요소(`$div)에 저장하면, 이후 이벤트가 발생합니다.
   • 예를 들어, 클릭 이벤트 $(this).data()를 사용하여div에그디데이터
2. DOM 조각 없이 데이터를 활용
   • data-*속성 사용자
   • 예시
      

$('.accordion-item-wrap').on('click', function() {
    const itemData = $(this).data();
    console.log(itemData); // 클릭한 div에 저장된 item 객체 출력
});

 

🔍예제 코드

items.forEach((item) => {
    const $div = $('<div class="accordion-item-wrap">');
    const html = this._dataConverter(item);
    
    $div.html($(html).html()); // 변환된 HTML 삽입
    $div.data(item); // item 객체를 $div에 저장

    $result.append($div);
});

// 이벤트 핸들러에서 해당 데이터 사용
$('.accordion-item-wrap').on('click', function() {
    const itemData = $(this).data();
    alert(`클릭한 아이템: ${JSON.stringify(itemData)}`);
});