将类添加到多个元素

时间:2013-11-01 08:49:32

标签: javascript jquery

我有一个克隆元素,我想要它,所以如果我向其中一个添加一个类,它检查主动删除是否将其添加到此并转换为另一个。以下是我正在使用的内容:

$(document).ready(function() {


    $("li").click(function(){

        /*Here I want to add something like var active = $(.clonedelement + this, this)
        but that does probably not makes sense, so what should i do? */

        var active = $(this)

      // If this isn't already active
      if (!$(this).hasClass("active")) {
        // Remove the class from anything that is active
        $("li.active").removeClass("active");
        // And make this active
        active.addClass("active");

      }
    });


});

现在,它从两者中删除当前活动,而不是仅将类添加到一个。

我做了一个jsfiddle http://jsfiddle.net/pintu31/8BxuE/

function UpdateTableHeaders() {
   $(".persist-area").each(function() {

       var el             = $(this),
           offset         = el.offset(),
           scrollTop      = $(window).scrollTop(),
           Header = $("#headerny", this)

       if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
          Header.addClass("floatingHeader");
       } else {
          Header.removeClass("floatingHeader");

       };
   });
}
// DOM Ready      
$(function() {

   $(window)
    .scroll(UpdateTableHeaders)
    .trigger("scroll");

});

3 个答案:

答案 0 :(得分:1)

试试这个

demo updated 1
demo updated 2 //使用clone(true)
demo updated 3 //使用clone(false) - 默认
demo updated 4

 $(document).ready(function() {
    $(document).on('click', 'li', function(){
        var ind = $(this).index();
        $('li').removeClass('active');
        $('li').eq(ind).addClass('active');
        $('#header1').empty();
        $('#header').find('ul').clone(true).appendTo( '#header1' );
    });
});

答案 1 :(得分:1)

如果您只需要使用活动类突出显示所单击的元素,并删除所有其他元素,请尝试以下操作:

$("li").click(function(){
    $("li").removeClass("active");
    $(this).addClass("active");
  });

你真的不需要检查这个,或者其他人是否已经拥有这个类,只需要将所有其他人的“活动”课程变为“主动”课程,并将其添加到已被点击的课程中

答案 2 :(得分:0)

$(document).ready(function() {


    $("li").click(function(){
        $("li").removeClass("active");
        // And make this active
        $(this).addClass("active");

      }
    });


});