jquery accessor id vs class?

Question

at this link: http://jqueryui.com/demos/tabs/ when we look "view source", we have:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">...</a></li>
        <li><a href="#tabs-2">...</a></li>
        <li><a href="#tabs-3">...</a></li>
    </ul>
    <div id="tabs-1">...</div>
    <div id="tabs-2">...</div>
    <div id="tabs-3">...</div>
</div>

so what I want to know, how to implement this with class instead of id,
considering this portion of code will be used multiple times that may be loaded ajax,
in different times.

Answer 1

for dynamically adding tabs, there is an add method that will auto-name your tab controls for you, thus letting you re-use your tab creation code repeatedly.

When a tab is added to the page, it fires the add event, as shown in the tabs doc page:

var $tabs = $('#example').tabs({
    add: function(event, ui) {
        $tabs.tabs('select', '#' + ui.panel.id);
    }
});

from http://jqueryui.com/demos/tabs/#default

Answer 2

The jquery ui tab control needs to uniquely identify and access those divs, hence classes are not an option. Just make sure that you provide unique id's before serving the html to the client.

You can have multiple tab controls on your page without problems.

<script>
   $(function() {
     $( "#tabs" ).tabs();
     $( "#tabs2" ).tabs();
   });
   </script>

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">...</a></li>
            <li><a href="#tabs-2">...</a></li>
            <li><a href="#tabs-3">...</a></li>
        </ul>
        <div id="tabs-1">...</div>
        <div id="tabs-2">...</div>
        <div id="tabs-3">...</div>
    </div>

    <div id="tabs2">
        <ul>
            <li><a href="#tabs2-1">...</a></li>
            <li><a href="#tabs2-2">...</a></li>
            <li><a href="#tabs2-3">...</a></li>
        </ul>
        <div id="tabs2-1">...</div>
        <div id="tabs2-2">...</div>
        <div id="tabs2-3">...</div>
    </div>

Answer 3

It is simply not possible.

a link anchor work with an ID, which has to be unique.

if you have multiple tabs with the same classes (same for the buttons) which tabs should it open when you click a button? I doubt you'd answers 'all of them'.

if it's a matter of style (css), you should just add a class along with the id.

Answer 4

Unfortunately the built in tabs associated with jquery ui are coded in a static fashion based on the id.

when you turn the div into a jqueryui tab it does a lot of work behind the scenes.

The href attribute of the link in the tab itself is coded to look for a specific content div. hence href="#tab-1" will always show the div with the id "#tab-1".

That is how it works. If you want to use the class instead you have to modify/extend the jquery ui tab functionality in the jqueryui library. Or you could write your own Jquery tab plugin.

Answer 5

You could use addClass method

$('#some_ul_id li').addClass(function(i, curr) {
  return "item-" + i;
});