Question

我正在尝试使用jQuery Button为我页面上的每个项目构建一个按钮栏;但是根据这些例子，当项目数量超过100时，我的性能会变差。我已经为我的调用添加了上下文，这有点帮助但是我觉得我为每个构建的按钮都重复了相同的上下文。

以下是用于向页面中的每个项目添加两个按钮按钮栏的代码示例。上下文是相同的，但它会被按钮栏中的每个按钮迭代。有没有办法迭代这个上下文一次并应用代码来设置每个按钮？

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

您可以使用.find()存储和重复使用引用，如下所示：

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'
            }
        });
    });
}

$(selector, context)内部呼叫context.find(selector)实际上只是you can see how it's handled here，.end()：）

或者，您可以使用{{3}}对其进行链接，如下所示：

$('#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' }
});

Answer 2

我不明白为什么不。 $('#container fieldset div.controls div.controlsToolbar')只是jQuery对象的一个实例，因此可以存储：

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

Answer 3

是

var toolbar = $('#container fieldset div.controls div.controlsToolbar');

toolbar.find('input.ItemSelect').button(...);

有没有办法分享jQuery上下文？

3 个答案: