仅定位选定的数据属性？答案

【问题标题】：Target only the selected data attributes?仅定位选定的数据属性？
【发布时间】：2013-11-16 23:29:47
【问题描述】：

有没有办法只选择/定位值为“winter”的“data-season”？

我的 HTML：

<li data-season="summer">summer
  <ul class="groups">
   <li data-item="beach">beach</li>
   <li data-item="Hawaii">Hawaii</li>
   <li data-item="Beach Ball">Beach Ball</li>
   <li data-item="hot sun">hot sun</li>
  </ul>
</li>

<li data-season="winter">winter
  <ul class="groups">
   <li data-item="snow">snow</li>
   <li data-item="glacier">glacier</li>
   <li data-item="hot soup">hot soup</li>
   <li data-item="snow man">snow man</li>
   <li data-item="heater">heater</li>
  </ul>
</li>

在我的 Jquery 中，我能够从返回函数中获取字符串“winter”，

现在我想只为雪、冰川、热汤、雪人和取暖器更改 css，但 css 不应该适用于夏天，我该怎么做？

【问题讨论】：

标签： javascript jquery css target

【解决方案1】：

  $('[data-item="winter"]').css('background':'red');

或

  foo = 'winter';
  $('[data-item="'+foo+'"]').css('background':'red');

DEMO

ps 这也适用于 css 规则

 [data-item="winter"]{
     border:1px solid red;
 }

【讨论】：

+1 用于提供纯 CSS 解决方案——这在 97% 的情况下都应该这样做。

【解决方案2】：

我想补充一点，因为我花了一些时间来解决这个问题，所以它不适用于使用 .data() 函数动态创建的对象，为了让它我在每个对象上创建一个属性，准确命名作为我传递给函数的 data() 键。

【讨论】：