Question

我已经制作了以下代码来转换必须应用jquery.ui样式的所有a元素，input type="submit元素，button元素和accordion div。

我使用了prop（'type'）和tagNames来找出我正在迭代的控件：

$(function () {
    $('body *:not(script, style, noscript)').each(function () {
        var t = $(this).prop('type');
        if (t != undefined && t !="") {
            if (t.indexOf("select") != "-1") {
                $(this).combobox();
            }
            else if (t.indexOf("button") != "-1") {
                $(this).button();
            }
        }

        if ($(this).get(0).tagName == "DIV" &&
            $(this).get(0).id != undefined &&
            $(this).get(0).id.toUpperCase() == "ACCORDION") {

            $(this).accordion({ collapsible: true });

        } else if ($(this).get(0).tagName == "A" || 
                  ($(this).get(0).tagName == "INPUT" &&
                  $(this).prop('type') == "submit")) {
            $(this).button();
        }
    });
});

显然这很棒。这个jquery ready函数包含在我的asp.net mvc布局页面中，当我添加一个新控件时，它是jquery-ui渲染的。

但问题是。你做过这样的事吗？有更好的方法吗？

Answer 1

您可以利用jQuery来简化您的代码：

$(function() {

    // Use selectors to get DOM elements you are interested in
    $('a, input[type=submit], button, select, .accordion').each(function() {

        // Create the jQuery object only once, avoid doing $(this) each time
        var $el = $(this);

        if($el.is('a') || $el.is('input[type=submit]') || $el.is('button'))
            $el.button();
        else if($el.is('.accordion')) 
            $el.accordion({ collapsible: true });
        else if($el.is('select'))
            $el.combobox();
    });
});

但更简单/可读的方式可能类似于：

$(function() {
    $('a, input[type=submit], button').button();
    $('.accordion').accordion({ collapsible: true });
    $('select').combobox();
});

在 jsFiddle

中查看它的实际效果

注1：我替换了您的测试检查，如果div的ID为accordion且css类accordion（选择器.accordion）。元素ID在DOM树中必须是唯一的，因此如果您有多个ID为accordion的div，请将其替换为css类accordion。

注意2： jQuery UI没有开箱即用的组合框小部件（AFAIK），也许您正在使用http://jqueryui.com/autocomplete/#combobox

迭代DOM元素并应用jquery-ui

1 个答案: