jQuery tabs add more selectors to same function

Question

I managed to reduce my jquery tabs to this current state where I define tabs ID in variables.

Question: How to modify this code to have more IDs?

For example:

var tabsId = '#tabs1', '#tabs2', ... ;
var containerId = '#tabs-container1', '#tabs-container2', ...

JS:

var containerId = '#tabs-container';
var tabsId = '#tabs';

$(document).ready(function() {
    // Preload tab on page load
    if ($(tabsId + ' li.current a').length > 0) {
        loadTab($(tabsId + ' li.current a'));
    }

    $(tabsId + ' a').click(function() {
        if ($(this).parent().hasClass('current')) {
            return false;
        }

        $(tabsId + ' li.current').removeClass('current');
        $(this).parent().addClass('current');

        loadTab($(this));
        return false;
    });
});

function loadTab(tabObj) {
    if (!tabObj || !tabObj.length) {
        return;
    }
    $(containerId).addClass('loading');
    $(containerId).fadeOut('fast');

    $(containerId).load(tabObj.attr('href'), function() {
        $(containerId).removeClass('loading');
        $(containerId).fadeIn('fast');
    });
}

HTML:

<ul class="mytabs" id="tabs">
    <li class="current"><a href="./tabs/tab1.php">Tab 1</a></li>
    <li><a href="./tabs/tab2.php">Tab 2</a></li>
    <li><a href="./tabs/tab3.php">Tab 3</a></li>
</ul>

<div class="mytabs-container" id="tabs-container">
    Loading. Please Wait...
</div>

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

You could use array's like

var tabIds = {'tab1','tab2'};

Then you can loop over the array elements. An alternative is to use the variables like you mentioned (comma separated) and split them. Then you can loop through them again. see this thread for an example: Split string with JavaScript

edited May 23 '17 at 12:11

Community

1
1

answered Jan 24 '14 at 10:05

Ruben Verschueren

822
13
28

Looking for way how to use loop to iterate selector. – Ing. Michal Hudak Jan 24 '14 at 10:27
in case of the array (you get an array when you split the var anyway). you can use: $.each(tabIds , function(key, tabid) { console.log(tabid); // or do something useful here }); – Ruben Verschueren Jan 24 '14 at 10:48

score 0 · Accepted Answer · answered Jan 24 '14 at 10:26

Actually, I don't se a single place in your code where you need your tabIds. It works exactly the same if you just remove it.

Unique instances of the .click() event will be added to each a element either way, and you don't have to specify them by ID´s. Here is an example with tabIds removed.

http://jsfiddle.net/c7RHs/

var containerId = '#tabs-container';

$(document).ready(function () {
    if ($('li.current a').length > 0) {
        loadTab($('li.current a'));
    }

    $('li a').click(function () {
        if ($(this).parent().hasClass('current')) {
            return false;
        }

        $('li.current').removeClass('current');
        $(this).parent().addClass('current');

        loadTab($(this));
        return false;
    });
});

function loadTab(tabObj) {
    if (!tabObj || !tabObj.length) {
        return;
    }
    $(containerId).addClass('loading');
    $(containerId).fadeOut('fast');

    $(containerId).load(tabObj.attr('href'), function () {
        $(containerId).removeClass('loading');
        $(containerId).fadeIn('fast');
    });
}

Otherwise, you could make an array of ID´s as suggested in another answer, but I don't think you need it.

Hope it helps!

jQuery tabs add more selectors to same function

2 Answers2