Javascript jQuery dom data api architecture
===

I have a question towards design of my application, it is a big project that contains the following example javascripts:

- modal.js (contains a jQuery plugin for modal forms)
- tooltip.js (contains a jQuery plugin for tooltips)
- textbox.js (contains a jQuery plugin for textboxes, placeholders etc.)

Would it hurt performance if I would use data-api to set up my whole javascript ui, so I would loop through all elements with this code and initialize a plugin if needed:

    $.each('[data-trigger="modal"]', function(a, b){
      // Do plugin code here $(this).modal()
    });

    $.each('[data-textbox="^*"]', function(a, b){
      // Do plugin code here $(this).textbox()
    });

    $.each('[data-tooltip="hello, I am a tooltip"]', function(a, b){
      // Do plugin code here $(this).tooltip()
    });

The other option would be:

    $(document).ready(function(){
      $('#modal-create-account-trigger').modal();
      $('#tb-username').textbox();
      $('#tb-password').textbox();
      $('#tb-fullname').textbox();
    });

I prefer the .each solution, so we can control it all fully in the HTML, how ever I know this is bad for performance, how bad is it, and are there alternatives?

Thanks alot for reading.