Combining Multiple attributes in jQuery

Below are some of the code snippets available in jQuery for you to combine your multiple lines of code:

Combining multiple css properties or element attributes:

Statement: Set the width and height attributes for a table with id=mytable
$(“#mytable”).attr({width:’50px’,height:’40px’});

Statement: Set the css properties of width, height, background-color for a div with id=mydiv
$(“#mydiv”).css({width:’50px’,height:’40px’,background-color:’#F2F2F2′});

Combining element multiple selector:

Statement: Set the width, height and background-color css properties for controls with id=mydiv1, mydiv2 and mydiv3

$(“#mydiv1, #mydiv2, #mydiv3”).css({width:’50px’,height:’40px’,background-color:’#F2F2F2′});

Combining attribute selectors:

Statement: Find out those elements with an id attribute, having ‘name’ ending with ‘mydiv’ and the ‘checked’ state being ‘checked’

$(“#mydiv[id][name$=’mydiv’][checked=’checked’]”).val();

Combining attribute selectors with psuedo properties:

Statement: Delete dropdown option values myvalue3, myvalue4 from a dropdown with id=mydiv

$(“#mydiv options:not([value=’myvalue1′][value=’myvalue2′]).remove();
$(“#mydiv options:[value=’myvalue3′],[value=’myvalue4′]”).remove();

Note: The coma separator in the last statement above will perform a repeat operation on the same element which implies that the above statement is a combined version of the below statements:

$(“#mydiv options:[value=’myvalue3′]”).remove();

$(“#mydiv options:[value=’myvalue4′]”).remove();
Setting multiple attributes for an element:

Statement: Create a new anchor tag and set its id, class and redirect url

$(‘</a>’, {
id : ‘myId’,
class : ‘myClass’,
href : ‘mytest.html’
});

Combining Objects in jQuery:

Statement: To combine or merge two objects in jQuery

var parentObject = { property1: false, property2: 5, property3: “foo” };
var options = { property1: true, property3: “bar” };

jQuery.extend(parentObject, options);
//Final values for parentObject { property1: true, property2: 5, property3: “bar” }

Happy Coding!!!