jQuery implement each() function fail

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>

EDIT:

My try:

I am trying to use jQuery each() function.

my example ... not working

$(document).ready(function() {

    var tabIds = ['1', '2', '3'];

    $.each(tabIds, function(key, tabid) {
        console.log(tabid);

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

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

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

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

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

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

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

    });

});

user583576 · Accepted Answer · 2014-01-24 13:49:34Z

1

Make them all have the same classname and use:

$(".classname").each(function(){
    //your code here
});

answered Jan 24, 2014 at 13:49

user583576

6196 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tirno Over a year ago

Alternatively, $("#tab li").each

Ing. Michal Hudak Over a year ago

I will have more tabs-containers, so I need to specify where tab will load (in which container) so I need ID's to determine that.

Collectives™ on Stack Overflow

jQuery implement each() function fail

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related