向带有数据属性标签的每个div添加class

Question

如何通过jQuery将widget-00，widget-01等CSS类添加到每个div中？

<div class="mdl-form  mdl-color--white mdl-shadow--2dp mdl-cell mdl-grid mdl-cell--12-col" data-widget-id="00">
<div class="mdl-form  mdl-color--white mdl-shadow--2dp mdl-cell mdl-grid mdl-cell--12-col" data-widget-id="01">
<div class="mdl-form  mdl-color--white mdl-shadow--2dp mdl-cell mdl-grid mdl-cell--12-col" data-widget-id="02">
<div class="mdl-form  mdl-color--white mdl-shadow--2dp mdl-cell mdl-grid mdl-cell--12-col" data-widget-id="03">

Answer 1

这将向具有mdl-form类的每个元素添加所需的类

$(".mdl-form").addClass("widget-00");

仅定位特定数据属性，您可以执行：

$(".mdl-form[data-widget-id='00']").addClass("widget-00");

Answer 2

这是实现此目的的最简单方法。

$(document).ready(function() {
  $(".mdl-form.mdl-cell").each(function() {
    var widgetClass = "widget-" + $(this).data('widget-id');
    $(this).addClass(widgetClass);
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mdl-form  mdl-color--white mdl-shadow--2dp mdl-cell mdl-grid mdl-cell--12-col" data-widget-id="00"></div>
<div class="mdl-form  mdl-color--white mdl-shadow--2dp mdl-cell mdl-grid mdl-cell--12-col" data-widget-id="01"></div>
<div class="mdl-form  mdl-color--white mdl-shadow--2dp mdl-cell mdl-grid mdl-cell--12-col" data-widget-id="02"></div>
<div class="mdl-form  mdl-color--white mdl-shadow--2dp mdl-cell mdl-grid mdl-cell--12-col" data-widget-id="03"></div>