Question

I’m trying to use jQuery Button to build a button bar for each item on my page; however following the examples I get poor performance when the number of items goes over 100. I’ve added context to my calls which helped a little but it bugs me that I’m revisting the same context for each button built.

Below is an example of the code used to add a two button button bar to each item in my page. The context is the same, but it gets iterated over for each button in the button bar. Is there a way to iterate over this context once and apply the code to setup each button?

function initLater()
{
    $(function () {

        $('input.ItemSelect', $('#container fieldset div.controls div.controlsToolbar')).button({
            text: false,
            icons: {
                primary: 'ui-icon-check'
            }
        });
        $('a.btnPrint', $('#container fieldset div.controls div.controlsToolbar')).button({
            text: false,
            icons: {
                primary: 'ui-icon-print'
            }
        });
    });
}

Answer 1

You can store and re-use the reference using .find(), like this:

function initLater()
{
    $(function () {
        var ctx = $('#container fieldset div.controls div.controlsToolbar');
        ctx.find('input.ItemSelect').button({
            text: false,
            icons: {
                primary: 'ui-icon-check'
            }
        });
        ctx.find('a.btnPrint').button({
            text: false,
            icons: {
                primary: 'ui-icon-print'
            }
        });
    });
}

A $(selector, context) call is really just a context.find(selector) internally anyway, you can see how it’s handled here 🙂

Alternatively, you can chain it using .end(), like this:

$('#container fieldset div.controls div.controlsToolbar')
  .find('input.ItemSelect').button({
    text: false,
    icons: { primary: 'ui-icon-check' }
}).end().find('a.btnPrint').button({
    text: false,
    icons: { primary: 'ui-icon-print' }
});