循环元素

Question

嘿伙计们，我想对所有具有“.block-header-tabs”类的元素进行函数循环，并执行以下操作：

$(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;

});

});

这是一个实例的链接，所以你可以自己查看:) http://dl.dropbox.com/u/2878602/moviezet/index.html

感谢

Answer 1

试一下

$(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

嘿我自己解决了这个问题，事实证明我不能使用a：首先定位主要块，如果我想在它上面使用.each（）。 :)如果有人有兴趣，这里是固定代码：

$(".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"});
});

谢谢：D