Select an Object with jQuery and add multiple functions to it, using (this)

Question

This will probably sound silly, but I want to optimize my jQuery code in order to achieve something like this:

jQuery("#myid).{ // Here, how can I make it work?
    var value = jQuery(this).val();
    if(value == null || value == ""){
     jQuery(this).addClass("error");
    }
    // and so on
}

Basically, I want to select a DOM element and apply various codes to it. How can I do it?

Ty guys, the idea is to add as many operations as I want - select the object once and than access it using (this) — user2065483
– user2065483, Commented May 22, 2013 at 19:20

Blender · Accepted Answer · 2013-05-22 19:09:18Z

1

Just assign it to a variable:

var $elem = jQuery("#myid");
var value = $elem.val();

if (value == null || value == ""){
    $elem.addClass("error");
}

You could also use .each(), as it'll iterate only over your single element, but it's somewhat confusing in my opinion:

jQuery("#myid").each(function(){
    var value = jQuery(this).val();
    if(value == null || value == ""){
     jQuery(this).addClass("error");
    }
    // and so on
})

answered May 22, 2013 at 19:09

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Selvakumar Arumugam Over a year ago

#myid and .each? I don't think it works well as jQuery would return single element when it looks a # which is going to use .getElementById.

Blender Over a year ago

@Vega: You can iterate over the set of matched elements. The selector still returns a jQuery object.

user2065483 Over a year ago

Ty, the idea is to add as many operations as I want - select the object once and than access it using (this) - So the assign into variable looks pretty good

palaѕн · Accepted Answer · 2013-05-22 19:18:24Z

1

Use the anonymous function:

jQuery("#myid").addClass(function(){   // To addClass
     return this.value ? 'error' : '';
}).css('width', function() {           // For css
     return this.value || 400;
}).attr("id", function () {            // For attribute change
     return "newID";
});

edited May 22, 2013 at 19:18

answered May 22, 2013 at 19:09

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

2 Comments

Blender Over a year ago

I don't think this.value can return null, so you can just do this.value ? 'error' : ''.

palaѕн Over a year ago

Yes, that's much better. Thanks :)

xdazz · Accepted Answer · 2013-05-22 19:11:29Z

0

If you have operation more than addClass, use .each

$("#myid").each(function() {
    var value = $(this).val();
    if(value == null || value == ""){
      $(this).addClass("error");
    }
    // and so on
});

answered May 22, 2013 at 19:11

xdazz

161k38 gold badges255 silver badges278 bronze badges

Collectives™ on Stack Overflow

Select an Object with jQuery and add multiple functions to it, using (this)

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related