Build JavaScript Object to Use with Jquery .Css() (What About Duplicate Keys)

Build JavaScript Object to use with jQuery .css() (what about duplicate keys?)

Having multiple keys with the same name is not valid, and will generate an error in strict mode.

Create a function/plugin which applies the properties of your cssObj. If a string-string pair is found, set a CSS property with the desired value.

If an array is found, loop through it, and update the property with each value. If an invalid value is found, it's ignored.

DEMO: http://jsfiddle.net/RgfQw/

// Created a plugin for project portability
(function($){
    $.fn.cssMap = function(map){
        var $element = this;
        $.each(map, function(property, value){
            if (value instanceof Array) {
                for(var i=0, len=value.length; i<len; i++) {
                    $element.css(property, value[i]);
                }
            } else {
                $element.css(property, value);
            }
        });
    }
})(jQuery);

// Usage:
var cssObj = {
    'background-color': '#000',
    'background-image': ['-webkit-linear-gradient(top,#000,#fff)',
                         'linear-gradient(top,#000,#fff)']
};
$(".element").cssMap(cssObj);

How to add a duplicate class to a DOM object using jQuery?

" If I 'disable' an element twice (adding two same classes) I should 'enable' it twice as well in order for my logic to work."

You could create your own plugin that keeps track of how many times the class has been added, something like this:

(function($) {
    $.fn.addClassWithCount = function (className) {
        return this.each(function() {
            var $this = $(this),
                count = $this.data("disable-count-" + className) + 1 || 1;
            $this.data("disable-count-" + className, count);
            $this.addClass(className);
        });
    };
    $.fn.removeClassWithCount = function (className) {
        return this.each(function() {
            var $this = $(this),
                count = $this.data("disable-count-" + className) - 1 || 0;
            if (count < 0) count = 0;
            $this.data("disable-count-" + className, count);
            if (count === 0)
                $this.removeClass(className);            
        });
    };
})(jQuery);

Which you'd then use like the standard .addClass() and .removeClass():

$("someSelector").addClassWithCount("someClass");

Demo: http://jsfiddle.net/Sve9Q/2/

Note that the above is just something I cobbled together quickly to give you the general idea, so obviously it could be prettied up and made more robust.

Any alternate for _.invert() of underscore in javascript/jQUERY which can allow duplicate keys

If you want a solution without using 3rd party libraries you could use Object.keys() to generate an array of keys from the original object to then use Array.prototype.reduce to iterate over to create the desired object.

function invert(srcObj) {
  return Object.keys(srcObj).reduce(function(obj, val) {
    var key = srcObj[val];

    if (!obj[key]) { obj[key] = []; }

    obj[key].push(val);

    return obj;
  }, {});
}

var origObj = {    'eatables': {      apple: 'fruits',      orange: 'fruits',      guava: 'fruits',      brinjal: 'vegetables',      beans: 'vegetables',    }  };
var newObj = invert(origObj.eatables);    function invert(srcObj) {  return Object.keys(srcObj).reduce(function(obj, val) {    var key = srcObj[val];
    if (!obj[key]) { obj[key] = []; }
    obj[key].push(val);
    return obj;  }, {});}
document.write('<pre>' + JSON.stringify(newObj, null, 2) + '</pre>');

Modify object's keys without creating new object

Yes, you just add the new keys and remove the old ones:

obj.x_foo_y = obj.foo;
delete obj.foo;
obj.x_bar_y = obj.bar;
delete obj.bar;

Note that on some engines (notably V8 in Chrome), this will impact the performance of the object. If you don't need to actually remove the properties, you could just set their values to undefined:

obj.x_foo_y = obj.foo;
obj.foo = undefined;
obj.x_bar_y = obj.bar;
obj.bar = undefined;

Which won't have the impact (it's the delete that makes V8 put the object into "dictionary mode," which is much slower than V8's normal compiled class mode).

If you wanted to do this for all "own" properties in an object:

var key;
for (key in obj) {
    if (obj.hasOwnProperty(key)) {
        obj["x" + key + "y"] = obj[key];
        delete obj[key]; // Or obj[key] = undefined if that's okay for your use case
    }
}

Jquery function css

Check jQuery .css documentation

jQuery(".template_content_img").css({
    "width": "50%",
    "height": "150px"
});

jQuery(".template_img").css({
    "width": "70%",
    "height": "100px"
});

EDIT: If you want add font-size or margin-bottom, just use classic CSS attributes/values

jQuery(".template_content_img").css({
    "width": "50%",
    "height": "150px"
    "font-size": "12px",
    "margin-bottom": "23px",
});

Jquery vs Javascript: getting css style object shows different result

Because jQuery's css function gives you the computed style, whereas Element.style.fontSize gives you only styles that have been applied inline. The vanilla equivalent to the jQuery code would be this:

var heading = document.getElementById("heading");
window.getComputedStyle(heading).getPropertyValue('font-size');

This will give you the actual font size of the element, after any CSS has been applied.

jQuery adding multiple css properties with same name doesn't work

The easiest way to maintain this code would be to store your css in a class and use in your elements. Style definition should be separate to your code.

if you really want to do this in jQuery you can use the attr style

var style = [
    'background-image: radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
    'background-image: -o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
    'background-image: -ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
    'background-image: -moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)',
    'background-image: -webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'
].join(';');

$('.ellipse').attr('style', style);

http://jsfiddle.net/z9ygxj9j/2/

---

Related Topics