Is it possible to apply css rules using json content in a data attribute?

Question

Is it possible to put green background on the spans that have an id represented in the div?

//Edit. If it makes it easier, just using the keys in the div attribute would work too. data-ids='["1", "2"]' or even data-ids="1,2". Not sure what's possible. If not, is there any clever JS/jQuery implementation that could help out?

<div data-ids='{"1":"Name A", "2":"Name B"}'>
    <span data-id="1">This should have green background</span>
    <span data-id="2">This should have green background</span>
    <span data-id="3">This should have no background</span>
</div>

Dummy code:

div[data-ids=*] span[data-id=*] {
    background: green;
}

Any ideas? Thank you!

SeaBass
– SeaBass

2019-05-31 16:59:46 +00:00
Commented May 31, 2019 at 16:59 — SeaBass
– SeaBass, Commented May 31, 2019 at 16:59

yqlim · Accepted Answer · 2019-05-31 17:56:18Z

You can't dynamically set styles using CSS. If you must do it, you need to manually type all possibilities out.

For example, if you need green background for <span> with id == 1 or id == 2, you need to write your CSS like this:

div[data-ids] span[data-id="1"],
div[data-ids] span[data-id="2"] {
  background: #0f0;
}

<div data-ids='{"1":"Name A", "2":"Name B"}'>
  <span data-id="1">This should have green background</span>
  <span data-id="2">This should have green background</span>
  <span data-id="3">This should have no background</span>
</div>

You have to use JS or jQuery to do what you need to do:

JavaScript (ES6 for simplicity) - see comments for explanation

// Get the div with `data-ids` attribute
const div = document.querySelector('div[data-ids]');

// Get the data in `data-ids`
const ids = div.dataset.ids;

// Parse the string data into Object
const data = JSON.parse(ids);

// Loop over the keys (id) of the data
// Selecting matching span to style them.
for (const id in data){
  const spans = document.querySelectorAll(`span[data-id="${id}"]`);
  spans.forEach(span => {
    span.style.background = '#0f0';
  });
}

<div data-ids='{"1":"Name A", "2":"Name B"}'>
  <span data-id="1">This should have green background</span>
  <span data-id="2">This should have green background</span>
  <span data-id="3">This should have no background</span>
</div>

jQuery (ES6 for simplicity) - see comments for explanation

// Get the div with `data-ids` attribute
const $div = $('div[data-ids]');

// Get the `ids` from attribute.
// jQuery automatically parse string data into JSON if valid.
const data = $div.data('ids');

// Loops through the ids and set matching span background color.
$.each(data, function(id){
  $(`span[data-id="${id}"]`).css('background', '#0f0');
});

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

<div data-ids='{"1":"Name A", "2":"Name B"}'>
  <span data-id="1">This should have green background</span>
  <span data-id="2">This should have green background</span>
  <span data-id="3">This should have no background</span>
</div>

imvain2 · Accepted Answer · 2019-05-31 20:05:37Z

1

This loops through divs, then loops through data ids of those divs and then adds a class to the appropriate children span

$("div[data-ids]").each(function(){
    let obj = $(this);
    $.each($(this).data("ids"),function(k,v){
      $(obj).find("span[data-id='" + k + "']").addClass("highlight");
    });
});

.highlight{
    background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-ids='{"1":"Name A", "2":"Name B"}'>
    <span data-id="1">This should have green background</span>
    <span data-id="2">This should have green background</span>
    <span data-id="3">This should have no background</span>
</div>

edited May 31, 2019 at 20:05

answered May 31, 2019 at 17:45

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

2 Comments

Stephen P Over a year ago

Nice. You could reduce the number of .each(f) loop iterations if you start with the selector $("div[data-ids]") — imagine 100 divs where only 2 of them have data-ids; that is 2 loop iterations vs. 100 iterations.

imvain2 Over a year ago

@StephenP I was actually wanting to do that , but I couldn't figure out how to determine if data-ids existed, I was only able to see if a data attribute had a value. I have updated my answer.

Collectives™ on Stack Overflow

Is it possible to apply css rules using json content in a data attribute?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related