Looping through Elements

Question

Hey guys, I want to make a function loop over all elements that have the class of ".block-header-tabs" and do the following:

$(function(){

function cssTabs(){

var firstTab = $(".block-header-tabs").find("a:first");
var firstBlock = $(".block-header-tabs").find("a:first").attr('href');
$(firstBlock).parent().css({position: "relative"});
$(firstBlock).css({position: "absolute", zIndex: "2"})
$(firstBlock).siblings().css({opacity: "0", position: "absolute", top: "0", zIndex: "1"});
$(firstTab).addClass("tab-current");
$(firstTab).siblings().addClass("tab-noncurrent");

}

cssTabs();

$(".block-header-tabs a").click(function(){
    $(this).siblings().removeClass("tab-current").addClass("tab-noncurrent");
    $(this).removeClass("tab-noncurrent").addClass("tab-current")
    var clickedTab = $(this).attr('href');
    $(clickedTab).siblings().css({zIndex: "1"}).stop(0,0).animate({opacity:"0"}, function(){
        $(clickedTab).siblings().css({display:"none"});
    });
    $(clickedTab).css({display:"block", zIndex:"2"}).stop(0,0).animate({opacity:"1"});

    return false;

});

});

here is a link to live example so you can check it out yourselves :) http://dl.dropbox.com/u/2878602/moviezet/index.html

thanks

Answer 1

Try This

$(function(){
  function cssTabs($this){
    var firstTab = $this(".block-header-tabs").find("a:first");
    var firstBlock = $this(".block-header-tabs").find("a:first").attr('href');
    $(firstBlock).parent().css({position: "relative"});
    $(firstBlock).css({position: "absolute", zIndex: "2"})
    $(firstBlock).siblings().css({opacity: "0", position: "absolute", top: "0", zIndex: "1"});
    $(firstTab).addClass("tab-current");
    $(firstTab).siblings().addClass("tab-noncurrent");
  }

  $('.block-header-tabs').each(function(index) {
    cssTabs($(this));
    $(this).find("a").click(function(){
      $(this).siblings().removeClass("tab-current").addClass("tab-noncurrent");
      $(this).removeClass("tab-noncurrent").addClass("tab-current")
      var clickedTab = $(this).attr('href');
      $(clickedTab).siblings().css({zIndex: "1"}).stop(0,0).animate({opacity:"0"}, function(){
          $(clickedTab).siblings().css({display:"none"});
      });
      $(clickedTab).css({display:"block", zIndex:"2"}).stop(0,0).animate({opacity:"1"});
      return false;
    });
  });
});

Answer 2

function cssTabs(element){
    var firstTab = element.find("a:first");
    var firstBlock = element.find("a:first").attr('href');
    $(firstBlock).parent().css({position: "relative"});
    $(firstBlock).css({position: "absolute", zIndex: "2"})
    $(firstBlock).siblings().css({opacity: "0", position: "absolute", top: "0", zIndex: "1"});
    $(firstTab).addClass("tab-current");
    $(firstTab).siblings().addClass("tab-noncurrent");
}



 $(function(){
    $.each($('.block-header-tabs'), function(i, el){
        cssTabs($(this));
        $(this).find('a').click(function(){
            $(this).siblings().removeClass("tab-current").addClass("tab-noncurrent");
            $(this).removeClass("tab-noncurrent").addClass("tab-current");
            var clickedTab = $(this).attr('href');
            $(clickedTab).siblings().css({
                zIndex: "1"
            }).stop(0,0).animate({
                opacity:"0"
            }, function(){
                $(clickedTab).siblings().css({display:"none"});
            });
            $(clickedTab).css({display:"block", zIndex:"2"}).stop(0,0).animate({opacity:"1"});
            return false;
        })    
    });
});

Answer 3

Hey I resolved this myself, turns out that I cannot use a:first to target the main block if I want to use .each() on it. :) here is the fixed code if anyone is interested:

$(".block-header-tabs").each(function(){
    $($(this).find("a:first").attr('href')).css({position: "absolute", zIndex: "2"})
    $($(this).find("a:first").attr('href')).siblings().css({opacity: "0", position: "absolute", top: "0", zIndex: "1"});
    $($(this).find("a:first").attr('href')).parent().css({position: "relative"});
});

Thanks :D