Geek Answers Handbook

Create a jquery token adder class

I am looking for a way to add a field with any number with jquery. It should be something like:

<div class="mr5">Add this text margin-right = 5px</div> <div class="ml15">Add this text margin-left = 15px</div> <div class="mt6">Add this text margin-top = 6px</div> <div class="mb4">Add this text margin-bottom = 4px</div>

etc.

 <div class="m4">Add this text margin = 4px</div> <div class="p4">Add this text padding = 4px</div> ...

Is it possible to create jquery code for this? Perhaps do it to fill.

The idea: It can also be used in the Bootstrap, for example, to add auto-completion, margins or font-size using fs18 , to add font size: 18px

thanks

+6
source share
3 answers

These are the parameters. He will also work with the add-on.

go to the "start with" class and the css you want to apply.

he will use regex to apply the value, and css to apply it.

 function addCss(startClass, css) { $('[class^="' + startClass + '"]').each(function() { var px, reg = new RegExp(startClass + "(\\d+)", 'g'); if ((px = reg.exec(this.className)) != null) { $(this).css(css, px[1] + 'px'); } }); } addCss('mr', 'margin-right'); addCss('ml', 'margin-left'); addCss('mt', 'margin-top'); addCss('mb', 'margin-bottom'); //addCss('pl', 'padding-left'); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mr5">Add this text margin-right = 5px</div> <div class="ml15">Add this text margin-left = 15px</div> <div class="mt6">Add this text margin-top = 6px</div> <div class="mb4">Add this text margin-bottom = 4px</div> <div class="mb40">Add this text margin-bottom = 4px</div> <div class="mb4">Add this text margin-bottom = 4px</div> <div class="mb400">Add this text margin-bottom = 4px</div> <div class="mb4">Add this text margin-bottom = 4px</div>
+4
source

Please try the following:

 $("div").each(function(){ var _thiss = $(this); var div_class = $(this).attr("class"); var margin = div_class.split("_"); if(margin[0] == "mr"){ $(_thiss).css({"margin-right":margin[1]+"px"}); } if(margin[0] == "ml"){ $(_thiss).css({"margin-left":margin[1]+"px"}); } });
+1
source 
 $(".mr5").css("margin-right", "5px"); $(".ml15").css("margin-right", "15px"); $(".mt6").css("margin-right", "6px"); $(".mb4").css("margin-right", "4px");

Add this to the page loader or where you want?

0
source

More articles:


All Articles