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

Advertisements
  1. Business organizations have cited different benefits when their leaders and their members have achieved personal mastery.

    Reply

  2. Hi i am kavin, its my first occasion to commenting anywhere,
    when i read this paragraph i thought i could also make comment due to this
    good article.

    Reply

  3. Hi there colleagues, how is the whole thing, and what you wish for to say concerning this piece of writing,
    in my view its genuinely remarkable designed for
    me.

    Reply

  4. Valuable information. Lucky me I found your website by accident, and
    I’m stunned why this accident didn’t came about in advance!
    I bookmarked it.

    Reply

  5. 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.

    Reply

  6. Heya i am for the first time here. I found this board and I
    find It really useful & it helped me out a lot. I hope to give something back and aid others like you aided me.

    Reply

  7. Pretty section of content. I just stumbled upon your web site and in accession capital to assert that I acquire actually enjoyed account your blog
    posts. Anyway I will be subscribing to your augment and even
    I achievement you access consistently rapidly.

    Reply

  8. Your method of explaining all in this paragraph is truly fastidious, all be able to effortlessly understand it,
    Thanks a lot.

    Reply

    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

      Reply

  9. 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?

    Reply

  10. I like what you guys tend to be up too. This kind of clever work and exposure!
    Keep up the very good works guys I’ve added you guys to blogroll.

    Reply

    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

      Reply

    2. When you think about it, that’s got to be the right answer.

      Reply

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

    Reply

  12. 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.

    Reply

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

Advertisements
Advertisements
%d bloggers like this: