Элементы Iterate DOM и применить jquery-ui

Question

Я сделал следующий код для преобразования всех элементов a, input type="submit элементов, button элементов и аккордеонных div, которые должны применять стили jquery.ui.

Я использовал подпорку («типа») и тэги, чтобы выяснить, что контроль я итерация:

$(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 rendered.

Но вопрос в том. Вы когда-нибудь делали что-то подобное? Есть ли лучший подход?

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 имеет идентификатор accordion с классом css accordion (селектор .accordion). Идентификатор элемента должен быть уникальным в дереве DOM, поэтому, если у вас есть несколько div с id accordion, замените их на класс css accordion.

Примечание 2: JQuery UI не имеет COMBOBOX виджет из коробки (AFAIK), возможно, вы используете http://jqueryui.com/autocomplete/#combobox