开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

JQuery |for循环创建唯一元素类

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。for 循环是一种控制结构，用于重复执行一段代码固定的次数。

相关优势

简化 DOM 操作：jQuery 提供了简洁的语法来选择和操作 DOM 元素。
跨浏览器兼容性：jQuery 处理了不同浏览器之间的差异，使得开发者可以编写一次代码，在多个浏览器中运行。
丰富的插件生态：jQuery 拥有庞大的插件生态系统，可以轻松实现各种功能。

类型

在 jQuery 中，for 循环通常用于动态创建元素并添加到 DOM 中。例如，创建具有唯一类名的元素。

应用场景

假设你需要在一个页面上动态创建多个具有唯一类名的按钮，每个按钮点击后显示其索引。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery For Loop Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="button-container"></div>

    <script>
        $(document).ready(function() {
            var container = $('#button-container');

            for (var i = 0; i < 5; i++) {
                var button = $('<button>').text('Button ' + (i + 1));
                button.addClass('button-' + i);
                button.click(function() {
                    alert('You clicked button ' + (i + 1));
                });
                container.append(button);
            }
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：点击按钮时，所有按钮显示相同的索引

原因：JavaScript 的闭包机制导致 i 在循环结束后取值为 5，因此所有按钮点击时显示的索引都是 5。

解决方法：使用立即执行函数表达式（IIFE）来捕获每次循环的 i 值。

for (var i = 0; i < 5; i++) {
    (function(index) {
        var button = $('<button>').text('Button ' + (index + 1));
        button.addClass('button-' + index);
        button.click(function() {
            alert('You clicked button ' + (index + 1));
        });
        container.append(button);
    })(i);
}

参考链接

通过上述方法，你可以动态创建具有唯一类名的元素，并确保每个元素的点击事件正确处理。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jQuery创建html元素【jQuery框架应用入门08】

jQuery创建一个html元素，将html标签的字符串放入$（）中就可创建一个DOM节点，接下去将DOM节点通过appendTo方法添加到指定的某个DOM中即可。...或者是通过先找到某个添加html元素的DOM节点，然后使用append方法添加DOM节点或者html字符串即可实现元素的创建并添加，。现在为我的歌曲榜榜单再添加一首或几首歌。...首先找到音乐榜单所在的区域是标签，那么先获取ol这个节点，使用jQuery代码$(“ol”)即可实现。...然后利用jQuery的append方法添加一首歌，使用代码： $("ol").append("水手") 或者 $("水手").appendTo($("ol")) 或者...图5-8 添加一首歌曲通过此案例读者进一步见证，创建一个html元素把它添加到指定的节点元素中，可以是字符串类型也可以是DOM节点类型。

1421 0

jquery 元素节点操作 - 创建节点、插入节点、删除节点

jquery的节点操作说明前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作，这种直接使用字符串创建的方式也是性能最高的。...另外还有其他创建节点、插入节点、删除节点的方法，如下： var $div2 = $('这是一个div元素'); # 创建节点 append() appendTo() #在现存元素的内部...，从后面插入元素 prepend() prependTo() #在现存元素的内部，从前面插入元素 after() insertAfter() #在现存元素的外部，从后面插入元素 before() insertBefore...() #在现存元素的外部，从前面插入元素创建节点 var $div = $(''); var $div2 = $('这是一个div元素'); 插入节点 1、append...()和appendTo()：在现存元素的内部，从后面插入元素下面写一个div内部插入元素的示例如下： ?

9K4 0

IDEA新建一个类快捷键及快速创建for循环

输入 5.fori ，就会生成一个i<5的for循环 for (int i = 0; i < 5; i++) { } 快速创建一个类选中其他类，按住 Alt+

1.2K1 0

【OpenHarmony】TypeScript 语法 ⑤ ( 类 | 类的创建和使用 | 类的继承 | 迭代器遍历 | for of 语句遍历元素 | for in 语句遍历下标 )

参考文档 : ArkTS开发语言介绍一、TypeScript 类 1、创建类语法 TypeScript 语言支持面向对象编程 , 下面介绍如何定义 TypeScript...{ console.log(this.name + " is " + this.age + " years old"); } 创建 TypeScript 类对象时 , 使用 new...关键字创建类对象 ; // 创建 Student 类对象 let student: Student = new Student("Jerry", 12); 创建对象后 , 使用 ....操作符 , 调用对象的成员 ; // 调用 Student 对象的成员方法 student.hello(); 2、代码示例 - 类的创建和使用代码示例 : class Student {...2 种方式 : for of 语句遍历的是元素 ; for in 语句遍历的事下标 ; 2、for of 语句遍历数组元素使用 for of 循环语句 , 可以对数组元素进行遍历 ; 代码示例

1081 0

从零开始学 Web 之 jQuery（四）元素的创建添加与删除，自定义属性

一、元素的创建添加和删除 1、方式一：以对象的方式创建元素 append，appendTo ：在被选元素所有子元素的结尾插入内容（增加子元素）。...语法： // 元素的创建 $("html代码"); // $("Daontin") // 元素的添加（被动）父元素.append...> Web技术 <script src="<em>jquery</em>...2、var actualLength = $(".tb :checked").length; 中 .tb 和 :checked 中间有空格，表示的是类 tb 下面的子元素集合中带有 checked 的元素...，而没有空格表示，设置了类 tb 的所有元素集合中带有 checked 的元素。

2.2K3 0

Java中如何使某个类的对象唯一性，只能创建一个对象

参考链接： Java中的类和对象方法一、对象唯一性一般能想到工厂模式，单例模式，我们这里介绍一下举例懒汉法。 .../Jerry System.out.println(s2.getName());//Jerry } } 新建的两个对象s1,s2其实是一个对象方法二、通过计数器统计来创建对象... System.out.println(t.getName()); //System.out.println(t1.getName()); } } 如上只能创建一个对象

2.5K1 0

前端开发面试题答案(四)

（1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode()...id等于name值的) getElementById() //通过元素Id，唯一性 35、.call() 和 .apply() 的区别？...* jquery.extend 为jquery类添加类方法，可以理解为添加静态方法 * jquery.fn.extend: 源码中jquery.fn= jquery.prototype，所以对jquery.fn...的扩展，就是为jquery类添加成员函数使用： jquery.extend扩展，需要通过jquery类来调用，而jquery.fn.extend扩展，所有jquery实例都可以直接调用。...闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环） 43、JQuery一个对象可以同时绑定多个事件，这是如何实现的？

2.2K2 0

【前端】Web前端学习笔记【2】

在构造函数中，this 绑定到新创建的对象。使用apply或call调用函数， this 将会被显式设置为传入的的第一个参数。...原生JS和jQuery的优劣对比 ---- jQuery的优点： jQuery对不同浏览器的事件，DOM对象，都进行了封装,各种操作都可以直接兼容各种浏览器。...jQuery拥有特有的CSS-Like选择器，链式写法，封装的各类animate函数，封装了的异步加载。 jQuery封装了AJAX操作。 jQuery的缺点： jQuery比原生JS执行效率慢。...important > 内联样式 > 内部样式表(style标签) > 外部样式表 > 浏览器缺省设置 CSS3新增伪类举例： p:first-of-type 选择属于其父元素的首个 ...p:only-of-type 选择属于其父元素唯一的元素的每个元素。 p:only-child 选择属于其父元素的唯一子元素的每个元素。

1852 0

【Java 进阶篇】JQuery 遍历 —— 无尽可能性的 `each` 之旅

在下面的例子中，我们使用 each 方法遍历一个包含颜色名称的数组，并在页面上创建对应颜色的块元素： <!...$.each(colors, function(index, value) { // 创建块元素 var block...适用范围：for...of 循环适用于所有可迭代对象，包括数组、字符串、Map 等。全局 each 更加灵活，可以遍历数组、对象、类数组对象等，但在语义上更偏向于数组和类数组对象的遍历。...语法差异：for...of 循环的语法相对简单，不需要引入 JQuery。全局 each 需要引入 JQuery，并且语法稍显繁琐。...它们是 JQuery 中非常有用的工具，能够帮助你轻松地遍历集合，并在遍历的过程中执行各种操作。无论是数组、对象还是其他类数组对象，each 方法都能胜任。

1794 0

jQuery(一)

('div') 其中 $ 和 jQuery 等价其中Jquery为工厂函数，将会返回一个新创建的对象。...即 $(document) 或 $(this) 使用这种方法可以完成对节点的操作第三种传递字符串文本给$()方法，jQuery将会根据传入的文本创建好HTML元素，然后将其封装为jQuery对象返回...必须为html标签，还需有一个尖角括号通过这种方式调用，将会接受第二可选参数，传递Document对象指定与所创建元素相关联的文档。...for循环 // 下方将会获取所有的dvi元素，并将其打印出来 $('div').each( (idx) => { console.log(this); } ); 类似于原生的forEach...会自动加上单位获取和设置css类 // 添加css类 $('h1').addClass('hilite'); // 给所有的h1元素添加一个类 $('h1+p').addClass('hilite first

2.1K4 0

06-老马jQuery教程-jQuery高级

返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。...如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。参数 object:需要例遍的对象或数组。 callback:每个成员/元素执行的回调函数。...语法：jQuery.makeArray(obj) 概述将类数组对象转换为数组对象。...类数组对象有 length 属性，其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。参数： obj:类型Object，类数组对象。...参数 target:一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。 object1:待合并到第一个对象的对象。

2.1K9 0

jQuery笔记(1) (多图)

如何使用: 首先我们去到jQuery官网,点击下载压缩的比较厉害,我们直接粘贴到我们自己创建的jQuery.min.js文件里就好了现在做一个操作感受一下jQuery的优势:...按理来说,应该要循环遍历修改才能使我们的背景颜色都变成粉色.这是因为jQuery有隐式迭代....隐式迭代(重要) 遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代简单理解: 给匹配到的所有元素进行遍历循环,执行相应的方法,而不用我们再去循环,简化我们的操作,方便我们调用....,排他思想: 当前元素设置样式.其余的兄弟元素清除样式.我们用原生的JS方法是很麻烦的,要双重循环才能实现排他思想,我们看看jQuery是怎么实现的吧....类操作和className的区别原生JS中的className会覆盖元素原先里面的类名.

9K1 0

【Java 进阶篇】JQuery 遍历 —— For 循环的奇妙之旅

在本篇博客中，我们将探讨 JQuery 中的 for 循环，深入解析它的原理和用法。探寻 for 循环的起源在深入研究 JQuery 中的 for 循环之前，让我们先了解一下 for 循环的起源。...在 JQuery 中，for 循环通常用于遍历匹配到的元素集合，执行特定的操作。理解 JQuery 的选择器在开始 for 循环的奇妙之旅之前，我们需要先了解 JQuery 的选择器。...接下来，我们将通过 for 循环来展示如何遍历这些元素。 JQuery 中的 for 循环在 JQuery 中，for 循环通常用于遍历匹配到的元素集合。...然后，我们使用 for 循环遍历了这些元素，并对每个元素执行了一些操作，比如添加类名和修改文字内容。这是一个简单的示例，但展示了 for 循环在 JQuery 中的基本用法。...主要原因在于，JQuery 对象是类数组对象，而不是真正的数组。因此，直接使用 for 循环时，我们需要注意一些细节，比如使用索引访问元素等。

2252 0

jQuery最佳实践

（3）最慢的选择器：伪类选择器和属性选择器先来看例子。...找出网页中所有的隐藏元素，就要用到伪类选择器： $(':hidden') 属性选择器的例子则是： $('[attribute=value]') 这两种语句是最慢的，因为浏览器没有针对它们的原生方法。...唯一的区别在于，.delegate()是当事件冒泡到指定的父元素时触发，.live()则是当事件冒泡到文档的根元素后触发，因此.delegate()比.live()稍快一点。...正确处理循环循环总是一种比较耗时的操作，如果可以使用复杂的选择器直接选中元素，就不要使用循环，去一个个辨认元素。...javascript原生循环方法for和while，要比jQuery的.each()方法快，应该优先使用原生方法。 10.

1.3K2 0

前端之jQuery

样式类 addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。...目的：我们已经创建好的事件如果想被动态创建的标签使用就需要用到事件委托，比如已经创建好了按钮点击的事件如果我们要将这个事件绑定给动态创建的一个按钮就通过事件委托，将事件绑定给按钮的父标签，这样当子标签...each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。...--为每一个li标签添加c1类--> 注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。...终止each循环 return false； 3.9.2.data() 在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

4.9K2 1

JavaScript类库---JQuery（一）

1、基础： Jquery类库定义了一个全局函数：JQuery(); 别名$.是JQuery在全局命名空间中定义的唯一两个变量。...返回一个新创建的JQuery对象；另：JQuery中定义的许多方法返回值都是JQuery对象(方法的调用者)；JQuery中函数:.each() JQuery中方法：**.each()没有符号; JQuery...第二个参数是可选的，值为一个元素或JQuery对象；这时返回的是特定元素的子元素中匹配到的元素集；参数是Element、Document或Window对象，返回这些对象封装成的JQuery对象；参数是...HTML文本字符串：(不能是纯文本，会被当做CSS字符串的)返回文本创建好的HTML元素并封装成的JQuery对象；此方式接受可选的第二个参数；1、可以用Document对象来指定与所创建元素相关联的文档...function(){}); JQuery遍历用的几个基础方法： each(): 例$('div').each(function(index,this){});此方法唯一参数为一个回调函数，回调函数的有两个参数

4.2K3 0

jquery要怎么写才能速度最快？（转…

（3）最慢的选择器：伪类选择器和属性选择器先来看例子。...找出网页中所有的隐藏元素，就要用到伪类选择器：　　$(':hidden') 属性选择器的例子则是：　　$('[attribute=value]') 这两种语句是最慢的，因为浏览器没有针对它们的原生方法...唯一的区别在于，.delegate()是当事件冒泡到指定的父元素时触发，.live()则是当事件冒泡到文档的根元素后触发，因此.delegate()比.live()稍快一点。...正确处理循环循环总是一种比较耗时的操作，如果可以使用复杂的选择器直接选中元素，就不要使用循环，去一个个辨认元素。...javascript原生循环方法for和while，要比jQuery的.each()方法快，应该优先使用原生方法。 10.

1.6K3 0

06-老马jQuery教程-jQuery高级

返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。...如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。参数 object:需要例遍的对象或数组。 callback:每个成员/元素执行的回调函数。...：jQuery.makeArray(obj) 概述将类数组对象转换为数组对象。...类数组对象有 length 属性，其成员索引为 0 至 length - 1。实际中此函数在 jQuery 中将自动使用而无需特意转换。参数： obj:类型Object，类数组对象。...参数 target:一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。 object1:待合并到第一个对象的对象。

1.8K0 0

前端开发，从草根到英雄（下）

我选择AirBnb的页面是因为它们的CSS类名非常直接，不会被一些编译器处理的模糊不清，所以你可以选择性的在任何页面做这些操作：选择一个具有唯一类名的header标签，改变其中的文字选择任何页面上的元素...强化原型作用域闭包事件循环事件通知请求、调用和绑定回调和承诺变量及函数挂起 Currying Imperative vs....这段程序的最大问题是它不够稳定：如果某个人修改了这段代码中的类名，例如将hero修改为villain，该监听事件将不会被触发，因为DOM中不在有hero类了。...如果你还想学习更多入门知识，你可以看下Codecademy的jQuery课程记住，jQuery不是唯一的imperative DOM操作解决方案，PlainJS和You Might Not Need...例如，你可以在CodePen中搜索一个时钟扁平时钟 jQuery墙钟漂亮的时钟复古的时钟 JavaScript简单时钟你可以使用两种方法来做这个实验，第一个是先创建和设计HTML、CSS布局，然后再增加

9571 0

前端系列 |原生JS和jQuery循环遍历函数

前言之前总是不清楚原生JS和jQuery中有哪些循环遍历函数，而且有时候还总是把原生JS方法当成jQuery方法来用，以致于项目总是报错，并且还不知道是什么原因。...原生JS循环遍历函数 1.for() for循环得知道数组的长度才能循环。它比较常用，这里就不多说了。 2.forEach () 不需要知道数组长度，也可以对数组中每一个元素进行操作。...calculator(m) { return m+2; } console.log(arr.map(calculator)); //结果为：[4，6,8,3] 6.filter() filter() 方法创建一个新的数组...jQuery循环遍历函数 1.each() var arr = ["x","y","z"]; $(arr).each(function (index,item) { console.log(index)...var result = $("div").filter(".cls"); //返回类名是cls的div元素 console.log(result); //结果为：类名为cls的div元素

6.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭