Adding a selector to a jQuery object in function parameter

Question

Sorry for the subject line, but I wasn't sure how exactly to phrase it. I'd like to automate this to a function $('#progress-row-1 .indicator).css('width', 100); the following way:

setWidth($('#progress-row-1'), 100);

So I only pass the ID of the element to the function. The element has only one child with a class called ".indicator". So...

In the function, I'd like to set the CSS width of the element who has a class named "indicator":

function setWidth(obj, size) {
    $('obj .indicator').css('width', size);
}

I know the $('obj .indicator') syntax is wrong, but I don't know what is the correct one. How would I access the passed object's child who has a class named ".indicator" such way? Can anyone help me out? Thank you!

Tadeck · Accepted Answer · 2012-06-23 02:33:44Z

3

Turning it into a plugin method:

$.fn.setIndicatorWidth=function(width){
    return this.each(function(){
        $(this).find('.indicator').width(width);
    });
}

Useage:

$('#progress-row-1').setIndicatorWidth(100);

edited Jun 23, 2012 at 2:33

Tadeck

138k28 gold badges155 silver badges201 bronze badges

answered Jun 23, 2012 at 2:28

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

6 Comments

Tats_innit Over a year ago

bruv ++1 Yes please .width. :)

BLSully Over a year ago

I like it, however, for the sake of argument, isn't this functionality a bit narrow in scope for a plugin? Genuinely curious about people's opinions on that.

charlietfl Over a year ago

@BLSully why too narrow, it keep's code readable in jQuery syntax and is chainable

BLSully Over a year ago

@charlietfl: Admittedly I don't know what the OP is trying to achieve, but this seems like something that either should be packaged at a higher level as a widget (theory is the end result here is a progress bar based on the id/class names), or is too infrequently used to hardcode things like the class-name inside the function.

charlietfl Over a year ago

@BLSully really not sure what you are suggesting. OP wants a function separated from the call, so likely plans on reusing it so plugin makes as much sense as regular function

|

BLSully · Accepted Answer · 2012-06-23 02:27:43Z

2

The most concise syntax (and I believe fastest) solution for that would be:

$('.indicator', obj).css('width', size);

answered Jun 23, 2012 at 2:27

BLSully

5,9291 gold badge29 silver badges46 bronze badges

Comments

matt3141 · Accepted Answer · 2012-06-23 02:22:57Z

1

Use .find()

obj.find(".indicator").css('width', size);

answered Jun 23, 2012 at 2:22

matt3141

4,4411 gold badge22 silver badges25 bronze badges

Collectives™ on Stack Overflow

Adding a selector to a jQuery object in function parameter

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related