Is there a way (jQuery is fine) to get all the data- attributes on a page and then change the values in the element’s class to those in the data- attribute?
E.g.
this:
<div class="class1 class 2">
A
</div>
<div class="class1 class 2" data-class-override="class3 class 4">
B
</div>
<div class="class1 class 2">
C
</div>
…becomes:
<div class="class1 class 2">
A
</div>
<div class="class3 class 4">
B
</div>
<div class="class1 class 2">
C
</div>
I need it to search the entire page as they could be anywhere.
I know $(this).data(“class-override”) would get it but how search the whole page and how do it in the best way?
Don’t know if this is the best way, but it works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<div class="class1 class 2">A</div>
<div class="class1 class 2" data-class-override="class3 class 4">B</div>
<div class="class1 class 2">C</div>
<script>
$(document).ready(function() {
$("body").find('[data-class-override]').each(function(){
$(this).removeClass();
$(this).addClass($(this).attr('data-class-override'));
$(this).removeAttr('data-class-override');
});
});
</script>
</body>
</html>