jquery对遍历出来的代码进行对应的修改

最新推荐文章于 2021-11-19 15:45:02 发布

原创最新推荐文章于 2021-11-19 15:45:02 发布 · 342 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#onclick

Jquery 专栏收录该内容

4 篇文章

订阅专栏

本文分享了一个使用jQuery动态生成并插入DOM元素的示例，包括如何遍历数据数组，生成对应HTML结构，并通过jQuery的$.each方法和append函数将其添加到页面中，最后通过点击事件实现元素的动态修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：因为恰巧帮朋友写这个demo，既然写了就分享一下

1、最终效果

2、代码

// 引入jquery

<div class="modal-footer"></div>

var data = [
   { name: '父元素一', id: '1' },
   { name: '父元素二', id: '2' },
   { name: '父元素三', id: '3' },
   { name: '父元素四', id: '4' }
 ]
 var html = '';
 $.each(data, function (index, value) {
    html += `<div>
      <div class="col-md-3">
        ${value.name}
        <span class="sure" onclick="closeClick(${value.id})">————关闭标签</span>
       </div>
    </div>`
  })
  $('.modal-footer').append(html)

  function closeClick(id) {
    console.log(id) // 通过ID，在这里就可以实现对应的修改了
  }