Home » Jquery » jquery – addClass to every div with data-attribute tag

jquery – addClass to every div with data-attribute tag

Posted by: admin February 22, 2020 Leave a comment

Questions:

How can I add CSS classes like widget-00, widget-01 etc. to each of these divs via jQuery?

<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">
How to&Answer:

To achieve this you could use the attribute selector along with addClass(). If you provide a function to the latter then you can read the data-widget-id attribute value and use it in the class you apply to the element. Try this:

$('[data-widget-id]').addClass(function() {   
  return `widget-${$(this).data('widget-id')}`;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mdl-form other-classes" data-widget-id="00">Foo</div>
<div class="mdl-form other-classes" data-widget-id="01">Bar</div>
<div class="mdl-form other-classes" data-widget-id="02">Fizz</div>
<div class="mdl-form other-classes" data-widget-id="03">Buzz</div>

That said, it’s worth noting that dynamically assigning classes at runtime is an anti-pattern. If you want to identify elements then you already have the widget-id you can select by, amongst other methods.

Answer:

This is how I would do it. Similar to Prateik’s answer but I would select it by the attribute and not by one class of the div.

That way you also make sure that the data-widget-id attribute is present without having to check for it.

$(document).ready(function(){
  $('[data-widget-id]').each(function(){
    $(this).addClass("widget-" + $(this).data('widget-id'));
  })
})
<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>

Answer:

the s do have closing tags, i didnt post it here.

I have tried now both snippets from you, but none of it worked unfortunately.
Personally i like the version by “Cornel Raiu” better, because there are many more with class .mdl-form which i did not tell you (but should not be affected).

Is it possible that jQuery isn’t doing anything?
I also tried some very simple stuff with no result, like:

    $(document).ready(function(){
        $( "body" ).prepend( "<p>Test</p>" );
    });

jQuery is embeded via

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Browser console is not logging any errors.
Maybe it is because i want to add it to an openHAB sitemap, maybe there is some restriction to it?

Answer:

This will add a desired class to every element with the class mdl-form

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

To only target specific data attributes, you can do:

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