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!!!

15 thoughts on “Combining Multiple attributes in jQuery

  1. Do you have a spam problem on this website; I also am a blogger,
    and I was wanting to know your situation; we have developed some nice
    practices and we are looking to exchange solutions with
    others, be sure to shoot me an e-mail if interested.

    1. It would be nice if you would elaborate furehtr as to how to edit the slide/image entry settings fading in and out vs simply ‘snapping’ in, or adjusting the rate of fade, or even whether the image slowly appears or whether it ‘slides’ in from the left or from the right

  2. Thanks , I have recently been searching for info
    about this topic for a long time and yours is the greatest
    I have found out so far. But, what concerning
    the conclusion? Are you positive about the source?

    1. Hello Madalina,I am having an issue with Multiple colum ftyuols in SharePoint 2010.Everything went well except for the last line of code $create(SP.UI.AspMenu, null, null, null, $get(myMenuID));I get the JS error A control is already associated with this elementPlease let me know

  3. It’s a shame you don’t have a donate button!
    I’d certainly donate to this superb blog! I guess for now i’ll
    settle for bookmarking and adding your RSS feed to
    my Google account. I look forward to brand new updates and will share this site with my Facebook group.
    Talk soon!

  4. Normally I do not read article on blogs, however I would like to say that this write-up very
    compelled me to take a look at and do it! Your writing style
    has been surprised me. Thank you, very great article.

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s