如何将List.js数据中的dataname值添加到LI标签？

要实现将数据中的dataname值作为类添加到每个<li>标签上，以此控制网格项尺寸，你可以按以下步骤调整代码：

1. 清理模板HTML #

首先修正模板里的重复属性问题，模板只保留基础结构即可，无需提前写无效的class和自定义属性：

<div style="display:none;">
  <li id="hacker-item" class="list-item">
    <h4 class="name"></h4>
    <p class="city"></p>
  </li>
</div>

2. 修改JavaScript逻辑 #

核心是在List.js的updated事件中处理类的添加——这个事件会在列表初始化、筛选、排序后触发，能保证每次列表更新都能正确给项绑定类：

var options = {
  item: 'hacker-item',
};

var values = [
  { name: 'Abraham', city: 'Stockholm', dataname: 'test1' },
  { name: 'Jonas', city: 'Berlin', dataname: 'test2' },
  { name: 'Bob', city: 'Edmonton', dataname: 'test3' },
  { name: 'Hulk', city: 'Calgary', dataname: 'test4' },
  { name: 'Daniel', city: 'New York', dataname: 'test5' },
  { name: 'Susan', city: 'Edmonton', dataname: 'test6' },
];

// 创建List实例
var hackerList = new List('hacker-list', options, values);

// 监听列表更新事件
hackerList.on('updated', function() {
  // 获取当前所有列表项（避免筛选后元素失效）
  var listItems = document.querySelectorAll('.list-item');
  
  listItems.forEach(function(item, index) {
    var itemData = hackerList.items[index].values();
    // 将dataname值作为类添加到li标签
    item.classList.add(itemData.dataname);
    // 填充其他内容
    item.querySelector('.name').textContent = itemData.name;
    item.querySelector('.city').textContent = itemData.city;
  });
});

3. 添加尺寸控制CSS #

现在可以通过test1、test2等类定义不同网格项的尺寸，这里用CSS Grid实现响应式网格：

ul.list {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin: 20px;
}

.list li {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 不同类对应的网格尺寸 */
.test1 { grid-column: span 2; grid-row: span 1; }
.test2 { grid-column: span 1; grid-row: span 2; }
.test3 { grid-column: span 2; grid-row: span 2; }
.test5 { grid-column: span 3; grid-row: span 1; }

完整可运行代码 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<section>
  <div id="hacker-list">
    <ul class="list">
    </ul>
  </div>
</section>

<div style="display:none;">
  <li id="hacker-item" class="list-item">
    <h4 class="name"></h4>
    <p class="city"></p>
  </li>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>

<style>
ul.list {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin: 20px;
}

.list li {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.test1 { grid-column: span 2; grid-row: span 1; background-color: #f0f8ff; }
.test2 { grid-column: span 1; grid-row: span 2; background-color: #ffe4e1; }
.test3 { grid-column: span 2; grid-row: span 2; background-color: #f0fff0; }
.test4 { grid-column: span 1; grid-row: span 1; background-color: #fff8dc; }
.test5 { grid-column: span 3; grid-row: span 1; background-color: #e6e6fa; }
.test6 { grid-column: span 1; grid-row: span 3; background-color: #fff0f5; }
</style>

<script>
var options = {
  item: 'hacker-item',
};

var values = [
  { name: 'Abraham', city: 'Stockholm', dataname: 'test1' },
  { name: 'Jonas', city: 'Berlin', dataname: 'test2' },
  { name: 'Bob', city: 'Edmonton', dataname: 'test3' },
  { name: 'Hulk', city: 'Calgary', dataname: 'test4' },
  { name: 'Daniel', city: 'New York', dataname: 'test5' },
  { name: 'Susan', city: 'Edmonton', dataname: 'test6' },
];

var hackerList = new List('hacker-list', options, values);

hackerList.on('updated', function() {
  var listItems = document.querySelectorAll('.list-item');
  
  listItems.forEach(function(item, index) {
    var itemData = hackerList.items[index].values();
    item.classList.add(itemData.dataname);
    item.querySelector('.name').textContent = itemData.name;
    item.querySelector('.city').textContent = itemData.city;
  });
});
</script>

关键说明 #

• updated事件：确保列表在任何状态变化（初始化、筛选、排序）后，类都能正确绑定到对应项上。
• classList.add()：不会覆盖原有类，比直接修改className更安全。
• CSS Grid：通过grid-column和grid-row控制项的跨度，轻松实现不同尺寸的网格布局。

内容的提问来源于stack exchange，提问作者tnebrekooy