jQuery循环

1.循环数组、对象:

$.each(数组/对象,结果函数),即$.(arr,function(x,y) {...} )

如果是数组,则函数中的x表示索引,y表示索引对应的值,只传递一个参数的话则表示索引下标。

如果是对象,则函数中的x表示键,y表示键对应的值,只传递一个参数的话则表示键。

<script>
   var arr=['ab','cd',12,'ef']; 
   $.each(arr,function (x,y) {
        document.write(x+' : ');
        document.write(y+'<br>')};
    )  
</script>

 

2.循环标签

$('p').each(function(){ $(this)  }),先获取标签集合,再通过each进行循环遍历,通过$(this)获取循环到的当前标签

<p>p1</p>  <p>p2</p>  <p>p3</p>
<button onclick="myClick()">点我</button>
<script>
    function myClick(){
        $('p').each(function(){
            console.log($(this));
            $(this).html('hello p')
        })
    }
</script>

执行结果如下左图,点击按钮后如下中间图,打印$(this)的结果如下右图。。

   

 

转载于:https://www.cnblogs.com/Forever77/p/10341066.html

### 使用 jQuery 循环生成 Input 元素 为了实现循环生成 `input` 元素的功能,可以利用 JavaScript 的数组结构来存储需要创建的输入框的相关信息,并通过 jQuery 来遍历这个数组并动态地向页面中添加这些元素。 下面是一个具体的例子: 假设有一个 JSON 数组包含了关于各个 `input` 元素的信息,比如它们的名字、类型以及默认值等。这段代码会根据此数组的内容,在指定容器内依次创建对应的 `input` 字段。 ```javascript $(function(){ var inputsInfo = [ {id:"name", name:"username", type:"text", placeholder:"Enter your username"}, {id:"email", name:"usermail", type:"email", placeholder:"Enter email address"}, {id:"password", name:"pwd", type:"password", placeholder:"Create password"} ]; $.each(inputsInfo, function(index, item){ $('<input>', { id : item.id, name : item.name, type : item.type, placeholder : item.placeholder }).appendTo('#container'); // 如果希望每个 input 后面跟随一个 br 标签以便换行显示,则可加入如下语句 $("<br>").appendTo("#container"); }); }); ``` 上述脚本会在文档加载完成后执行,它定义了一个名为 `inputsInfo` 的数组,其中每一个对象代表一个待创建的 `input` 控件及其属性设置;接着使用 `.each()` 方法迭代该数组中的每一项数据,对于每一轮次的数据都调用一次 `$('<input>')` 构造函数以实例化一个新的 `input` DOM 节点,并为其设定相应的特性(如 ID、名称、样式等),最后将其附加至拥有 `id="container"` 的父级节点之下[^1]。 #### 关于事件绑定 如果还需要为新创建的 `input` 组件绑定某些交互行为(例如点击响应),可以在构建时一并将回调函数作为参数传递进去,就像第一个引用里展示的例子那样设置了点击警告消息一样[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值