How can I get data to the parent of my ListJS Item?

Issue

I am currently using List.js to make a filterable grid. Now I want to have the grid to have different sizes so 1 item should be bigger than the other one. I wanted to use a class for this but the li. needs to get the class. In the data is dataname.

How could I get the dataname value to add to the LI tag?

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'
  },
];

// Creating the list object
var hackerList = new List('hacker-list', options, values);

// Set data-name attribute and text content for each item in the list
var listItems = document.querySelectorAll('.list-item');

hackerList.on('updated', function() {
  listItems.forEach(function(item, index) {
    var hackerData = hackerList.items[index].values();
    // Set the data-name attribute for the entire list item
    item.setAttribute('data-name', hackerData.dataname);
    // Set the text content of the h4 element inside the list item
    item.querySelector('.name').textContent = hackerData.name;
  });
});

ul.list {
  padding: 0;
  list-style: none;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 20px;
}

.list li {
  padding: 10px 20px;
}

.list li+li {
  border-top: 1px solid #ccc;
}

<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" class="dataname" dataname="dataname">
    <h4 class="name"></h4>
    <p class="city"></p>
    <div class="dataname"> </div>
  </li>
</div>

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

Solution

I'm not 100% clear on what you're asking for, and I don't know what this list library does. But I think you're saying that you aren't getting those attributes added to your elements? The problem may be that you're only adding the element attributes inside an event handler. So if that event is never fired, the attributes are never added.

I just moved your code into a function that is called by the event handler, but I also call it outside the handler, so that it runs at least once at page load.

For styling, if you're looking to style an element with a particular attribute value, CSS has syntax for that.

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'},
];

// Creating the list object
var hackerList = new List('hacker-list', options, values);

// Set data-name attribute and text content for each item in the list

const updateItems = function() {
  const listItems = document.querySelectorAll('.list-item');
  listItems.forEach(function(item, index) {
    // avoid undefined index errors
    var hackerData = hackerList.items[index]?.values();
    if (!hackerData) return;
    // Set the data-name attribute for the entire list item
    item.setAttribute('data-name', hackerData.dataname);
    // Set the text content of the h4 element inside the list item
    item.querySelector('.name').textContent = hackerData.name;
  });
}
hackerList.on('updated', e => updateItems());
updateItems();

ul.list {
  padding: 0;
  list-style: none;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 20px;
}

.list li {
  padding: 10px 20px;
}

.list li+li {
  border-top: 1px solid #ccc;
}

li[data-name='test3'] {
  background: #edcad3;
}

<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" class="dataname">
    <h4 class="name"></h4>
    <p class="city"></p>
    <div class="dataname"> </div>
  </li>
</div>

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

Answered By - miken32