javascript - How to individually target multiple dropdowns in CSS for Dropkick Plug-in

Question

Follow up to: How to get the output in relative units instead px by modifying this jQuery plugin of making custom style dropdown?

Referring to: http://jamielottering.github.com/DropKick/

Given the following JS:

    dropdownTemplate = [
  '<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}">',
    '<a class="dk_toggle">',
      '<span class="dk_label">{{ label }}</span>',
    '</a>',
    '<div class="dk_options">',
      '<ul class="dk_options_inner">',
      '</ul>',
    '</div>',
  '</div>'
].join(''),

How can I assign a custom ID or otherwise individually target each dk_toggle instance? I am creating multiple dropdowns, but the only way to modify the width (per linked question) is to target the dk_toggle class, which does not have an ID assigned to each instance.

Answer 1

Assigning a unique ID would be the job of the template parser. You don't mention which templating engine you're using. The general idea is that you pass the dropdown data, along with a reference to the template you defined above, to the template parser. The parser will inject the id values into the correct template element and then you're off to the races.