jquery 封装一个列表组件，每条列表都有一个按钮，点击按钮怎么可以获取这条列表的数据，是先把数据用data-的方式写到html 上吗？ 还是通过循环数组匹配得到当前这条列表的数据？

你可以通过在每条列表的按钮上添加一个自定义属性（例如data-id），来存储该列表对应的数据的唯一标识。然后，在点击按钮时，可以通过获取该自定义属性的值，来获取该列表对应的数据。

具体实现方法如下：

1. 在html中，为每条列表的按钮添加一个自定义属性data-id，并设置为该列表对应的数据的唯一标识，如下所示：

<ul id="list">
  <li>
    <span>列表1</span>
    <button class="btn" data-id="1">查看详情</button>
  </li>
  <li>
    <span>列表2</span>
    <button class="btn" data-id="2">查看详情</button>
  </li>
  <li>
    <span>列表3</span>
    <button class="btn" data-id="3">查看详情</button>
  </li>
</ul>

2. 使用jQuery绑定按钮的click事件，获取该按钮的data-id属性值，并根据该值来获取对应的数据，如下所示：

$(document).on('click', '.btn', function() {
  var id = $(this).data('id'); // 获取按钮的data-id属性值
  var data = getDataById(id); // 根据id获取对应的数据
  // 显示数据详情
  alert('您点击的是列表' + id + '，对应的数据是：' + data);
});

// 根据id获取对应的数据
function getDataById(id) {
  // 在这里可以通过循环数组匹配得到当前这条列表的数据，也可以通过其他方式来获取数据
  // 这里假设数据存在一个对象数组中，每个对象都有一个id属性
  var dataList = [
    {id: 1, name: '数据1'},
    {id: 2, name: '数据2'},
    {id: 3, name: '数据3'}
  ];
  for (var i = 0; i < dataList.length; i++) {
    if (dataList[i].id == id) {
      return dataList[i].name;
    }
  }
}

这样，当用户点击某个列表的按钮时，就可以获取该列表对应的数据了。需要注意的是，为了保护数据的安全性，最好不要把数据直接写到html中（即不要使用data-的方式），而是通过其他方式动态加载数据，例如通过Ajax请求后端接口获取数据。