`
747017186
  • 浏览: 332358 次
社区版块
存档分类
最新评论

jquery addClass(function(index, class))

 
阅读更多

、.addClass(function(index,currentClass))

这个方法是通过函数为匹配的元素增加指定的类名,其中function(index,currentClass)必须返回一个或多个空格分隔的类名,其主要接受两个参数,index参数是为对象在这个集合中的索引值,currentClass参数为这个对象原行的类名。我们来看一个实列:

   <script type="text/javascript">
	$(function(){
		$("#addClass").click(function(){
		   $("div.demo li").addClass(function(index,currentClass){
			var addedClass;
			if(currentClass == "") {//判断列表项初始类名是不是空字符串,如果是空就增加类名						
				addedClass = "item-" + (index+1);//定义类名
			}
		       return addedClass;//返回类名
		    })
		return false;
        	});			
	});
   </script>

上面代码所表示的是点击“addClass”按钮后,给div.demo中的列表项没定义类名的列表增加指定的类名。一起看看点击前后的对比图(Firebug对比图)

分享到:
评论

相关推荐

    a标签跳转到指定div,jquery添加和移除class属性的实现方法

    也很简单,使用jquery的方法addclass()和removeclass()属性就可以完成了。 其次,jquery的代码必须写到 $(document).read(function(){ //代码 }); 以上就是小编为大家带来的a标签跳转到指定div,jquery添加和移除...

    jQuery使用addClass()方法给元素添加多个class样式

    本文实例讲述了jQuery使用addClass()方法给元素添加多个class样式的方法。分享给大家供大家参考。具体如下: jQuery通过addClass()方法给元素添加多个class,只需要在添加的class中用空格分开多个class既可 &lt;!...

    jQuery中addClass()方法用法实例

    $("p").addClass(function(index, oldClass) { // 动态返回要添加的类名 return "highlight"; }); ``` 这段代码会对所有`&lt;p&gt;`元素执行函数,函数根据每个元素的具体情况返回`highlight`类名。这种方式在需要根据...

    jquery手册(jquery.cuishifeng.cn网页版)2

    1. **选择器**: jQuery的选择器允许你高效地选取DOM元素,如`$("#id")`选取ID为指定值的元素,`$(".class")`选取所有class为指定值的元素,`$("tag")`选取所有特定类型的元素。 2. **DOM操作**: jQuery提供了简便的...

    JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例

    总的来说,jQuery的`addClass`、`removeClass`和`toggleClass`提供了强大的灵活性,使得开发者能够轻松地控制元素的CSS类,增强用户体验,提高网页的互动性。熟练掌握这些方法对于提升jQuery编程能力至关重要。

    jquery-1.12.4-jquery.min.js.zip

    1. **DOM操作**:jQuery 提供了一套丰富的选择器,可以方便地选取DOM元素,如$("#id")用于选取ID为id的元素,$(".class")用于选取所有class为class的元素。此外,它还提供了链式操作,如$("#element").addClass(...

    jquery validate 信息气泡提示

    $(element).addClass(errorClass).removeClass(validClass); $(element).poshytip('setContent', $(element).attr('data-error-message')); $(element).poshytip('show'); }, unhighlight: function(element, ...

    jquery1.4.2 jquery1.4.2

    1. 选择器:jQuery的核心之一是其强大的CSS选择器支持,包括ID选择器 (#id)、类选择器 (.class)、元素选择器 (element) 等,甚至支持组合选择器和伪类,如 $(“div.special”).find(“p:first”),可以高效地定位到...

    Jquery下載,Jquery-3.5.1

    例如,`$("#myID")` 会选择 ID 为 "myID" 的元素,`$(".myClass")` 会选择所有 class 为 "myClass" 的元素。 2. **DOM 操作**: jQuery 提供了方便的方法来创建、修改和删除 DOM 元素。例如,`$( "&lt;div&gt;&lt;/div&gt;" )....

    利用jquery实现图片得轮播

    $dots.eq(slideIndex).addClass('active'); setTimeout(function() { $slides.eq(slideIndex).fadeOut(600); slideIndex = (slideIndex + 1) % $slides.length; showSlides(); }, 3000); // 修改此值可以调整...

    jquery检测屏幕宽度并自动添加class

    标题"jquery检测屏幕宽度并自动添加class"正是关于如何利用jQuery来判断用户设备的屏幕宽度,并据此动态地在HTML元素上添加或移除CSS类,以实现页面布局的自适应。 首先,我们需要理解jQuery的核心概念。jQuery简化...

    jQuery 1.5 API 中文版

    $.addClass( class ), .addClass( fn(index, class) ) bool.hasClass( class ) $.removeClass( [class] ), .removeClass( fn(index, class) ) $.toggleClass( class [, switch] ), .toggleClass( fn(index, class) ...

    jquery滑动图片效果

    $(this).addClass('active'); currentSlide($(this).index()); }); ``` 这样,我们就实现了一个完整的jQuery滑动图片效果。当然,实际应用中可能还需要考虑响应式布局、触摸事件支持等细节,但以上内容足以让你...

    Jquery评星效果Rating精华实例

    stars.slice(0, index + 1).addClass('selected'); stars.slice(index + 1).removeClass('selected'); // 可以在此处触发回调函数,传递选定的星级 }); }); }); ``` 为了自定义评星描述,可以在每个`&lt;div ...

    Jquery九宫格效果

    $(this).addClass('highlight'); }, function() { $(this).removeClass('highlight'); } ); }); /* 在CSS中定义高亮效果 */ .cell.highlight { background-color: #ffcc00; transition: background-color ...

    添加class属性--互斥

    本文将详细介绍如何利用jQuery库实现元素之间的互斥性操作,即点击某个元素时为其添加特定的`class`,同时去除其他同级元素的该`class`,从而达到样式互斥的效果。 #### jQuery简介 jQuery是一款快速、简洁的...

    jQuery插件和API

    .next().addClass('active'); index = (index + 1) % $items.length; } setInterval(nextSlide, 3000); // 每3秒切换一次 }; $('#slider').slider(); })(jQuery); ``` 在这个例子中,我们创建了一个名为`...

    jquery资源包

    - **事件处理**:jQuery简化了事件绑定,如`$("element").click(function() {...})`用于监听元素的点击事件。 - **动画效果**:通过`fadeIn()`, `slideUp()`等方法,可以轻松实现过渡和动画效果。 - **AJAX**:...

    jquery手风琴实现图片切换

    $('.accordion-title').eq(index).addClass('active') .siblings('.accordion-title').removeClass('active'); // 如果设置了手动播放,清除自动播放定时器 if (!intervalId) return; index = (index + 1) % ...

Global site tag (gtag.js) - Google Analytics