是否可以在数据属性中使用json内容应用CSS规则？

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;
}

Answer 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> 

Answer 2

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>