在克隆期间更改内部元素 id

2024-02-03

我正在单击按钮时克隆 DIV 元素,我可以更改正在克隆的 DIV 元素的 ID 值。但是是否可以更改内部元素的 id?

在下面的代码中,我更改了 Id#selection克隆时,我需要动态更改 id#select.

<div id="selections">
  <div class="input-group" id="selection">
    <span class="input-group-addon">
    <i class="icon wb-menu" aria-hidden="true"></i>
     </span>
    <select class="show-tick" data-plugin="select2" id="select">
      <option>True</option>
      <option>False</option>
    </select>
  </div>
</div>
<button class="btn btn-primary" type="button" style="margin-left: 30px;">
  Add new selection
</button>

下面的JS

$(function() {
  //on click
  $("body").on("click", ".btn-primary", function() {
    alert($(".input-group").length)
    var
    //get length of selections
      length = $(".input-group").length,
      //create new id
      newId = "selection-" + length++,
      //clone first element with new id
      clone = $("#selection").clone().attr("id", newId);
    //append clone on the end
    $("#selections").append(clone);
  });
});

是的..完全可能如下:

var clone = $("#selection").clone();
clone.attr("id", newId);

clone.find("#select").attr("id","select-"+length);

//append clone on the end
$("#selections").append(clone); 
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在克隆期间更改内部元素 id 的相关文章

  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • 可以使用 jQuery 或 Javascript 将图片的特定部分用作链接吗?

    我有这个想法 将图片 而不是文本 的各个部分链接到不同的页面或网站 并且我想在不实际创建不同的照片并将它们彼此靠近的情况下完成 这样看起来就像是一张完整的图片 这里有人知道如何使用 JavaScript 的变体 例如 jQuery 或纯 J
  • JavaScript 重定向到新窗口

    我有以下代码 它根据下拉列表的值重定向到页面 我如何使其在新窗口中打开 function goto form var index form select selectedIndex if form select options index
  • jquery.validate 中是否有一个函数可以像重置表单一样重置单个字段?

    我想调用 jquery 函数来手动删除单个字段中的错误并重置错误标记 是否有一个函数可以执行此操作 类似于 resetForm 函数 您可以执行以下操作来验证单个字段 your field valid 也许它会对某人有所帮助 Thanks
  • 音频 blob 的 URL.createObjectURL 在 Firefox 中给出 TypeError

    我正在尝试从创建的音频 blob 创建对象 URLgetUserMedia 该代码在 Chrome 中可以运行 但在 Firefox 中存在问题 错误 当我打电话时stopAudioRecorder 它停在audio player src
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
  • 如何使用 JQuery 动态排序

    如果我有一个下拉列表和一个列表框 有没有办法使用 JQuery 根据下拉列表对列表框进行排序 举个例子会很有帮助 这会改变下拉菜单中的顺序 您必须根据自己的标准设置顺序
  • 使用 JQuery 更改元素的顺序

    有人知道我做错了什么吗 我正在尝试更改某些图像的显示顺序 我希望每次按下按钮时图像都会向右 向左移动一个位置 这是我尝试过的 但没有运气 任何帮助或见解将不胜感激 rightShift click function img hide var
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
  • Javascript 纪元时间(以天为单位)

    我需要以天为单位的纪元时间 迄今为止 我已经看到过有关如何翻译它的帖子 但几天后就没有了 我对纪元时间很不好 我怎么能得到这个 我需要以天为单位的纪元时间 我将解释为您想要自纪元以来的天数 纪元本身是第 0 天 或第 1 天的开始 无论您如
  • Safari 支持 JavaScript window.onerror 吗?

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s
  • 如何更改此 jquery 插件的时区/时间戳?

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示
  • 如何从图像输入中获取 xy 坐标?

    我有一个输入设置为图像类型

随机推荐

  • 重复捕获组

    我有一个包含零个或多个数字 然后包含零个或多个字符的字符串ABCD 我想将数字解析为一组 然后将所有字符解析为每个字符的单独组 我试过了 0 9 ABCD 正确捕获数字 但仅捕获最后一个字母 0 9 ABCD 正确捕获数字 但首先捕获一组中
  • 权限错误:[Errno 13] 权限被拒绝

    我收到此错误 Exception in Tkinter callback Traceback most recent call last File C Python34 lib tkinter init py line 1538 in ca
  • 删除/清除 django.contrib.messages

    我想有条件清除django contrib messages 这两个问题中讨论的解决方案都不起作用 删除所有 django contrib messages https stackoverflow com questions 3951831
  • Angular v4:我们将数据存储在服务或组件中还是两者都存储?

    Angular v4 我们将数据存储在服务或组件中还是两者都存储 在查看了相当多的教程以及阅读了 Angular 的文档之后 我仍然不清楚这个主题 https angular io tutorial toh pt2 https angula
  • Eclipse + maven:忽略配置文件

    这是我的 pom xml
  • 使用主机文件的本地主机上的通配符子域[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在尝试在 Windows 7 上运行 IIS 7 的开发计算机上设置子域 看起来可以通过编辑hosts文件输入C Windows Sy
  • 重写onDraw()还是draw()?

    我的项目基于 SurfaceView 到目前为止 我已经在 onDraw 中进行了所有渲染 我正在覆盖它 一切似乎都很好 然而 我刚刚更新了我的 SDK 现在它给我一个错误告诉我 可疑的方法调用 可能应该调用 draw 而不是 onDraw
  • JQuery UI:如何使用其命名空间调用小部件函数

    我创建了两个具有相同名称但具有不同命名空间的自定义 JQuery UI 小部件 如下所示 第一个小部件 widget finance dialog this was created in the file jquery finance di
  • webpack 引用不带变量的类型

    running yarn run webpack dev 没问题 但是 yarn run webpack prod 产生这个错误 ERROR in Illegal State referring to a type without a va
  • OpenCV 将 Mat 保存为二进制(1 位深度)TIFF

    假设我们有一个Mat应用OpenCv后Imgproc adaptiveThreshold Mat srcImage Mat binaryImage new Mat Imgproc adaptiveThreshold srcImage bin
  • 将 JSON 转换为 .csv

    我发现有人正在将一些数据下载到 JSON 文件中 我想 我是新手 该文件包含近 600 名足球运动员的数据 这是文件 https raw githubusercontent com llimllib fantasypl stats f944
  • 如何获取当前键盘布局的代码页?

    我的非 Unicode 应用程序需要能够处理 Unicode 键盘输入 WM CHAR 等 从而接收 8 位字符代码 然后在内部将其转换为 Unicode 需要 9x 兼容性 因此不能选择使用大多数 Unicode API 目前 它查看 P
  • iOS FFT 绘制频谱

    我读过这些问题 使用 Apple FFT 和加速框架 https stackoverflow com questions 3398753 using the apple fft and accelerate framework 使用 Acc
  • 选择 Firefox 附加目录中的文件

    为了简单起见 我将基于 XUL 的 Firefox 插件转换为基于 SDK 的版本 我在基于 XUL 的版本中使用的 XPCOM 模块似乎可以工作 但 ci nsIFile 的行为不同 我不知道如何导航到当前位于目录最高层的 smartPr
  • ASP.NET MVC MultiSelectList 的选定值未正确选择

    我知道其他人也问过这个问题 但我对此完全困惑 这将显示未选择任何值的下拉列表 这将显示下拉列表 其中包含我在 Model items 中传递的值 这些值已正确选择 就像我所期望的那样
  • 使用 gdb 调试 C++11 右值引用

    我刚刚注意到我无法调试rvalue参考文献与gdb 7 7 1适当地 void simple int i 当我输入这个简约函数时 我无法获得任何有意义的信息i It s type and value are unknown to gdb s
  • 当我实现自定义 Lint 检测器时如何调试 java 源代码?

    我是一名 Android 开发者 我已经通过实现新的 XXXDetector 和 XXXIssueRegistry 设计了自己的 lint 规则 这是我的源代码片段 我的 XXXIssueRegistry 文件 public class M
  • 关闭 Windows 8 超级按钮栏

    我有一台 Surface Pro 我需要将其 锁定 为一种 Kiosk 模式 我知道 信息亭模式 的更新正在进行中 但是我需要在此之前执行此操作 我在互联网上进行了搜索 但似乎您无法通过滑动来禁用超级按钮栏screen 我找到了禁用触控板的
  • C 静态库的包装

    我有一个用于相机的 C 静态库 现在计划为 Windows 8 开发 C WPF UI 它将使用 C 静态库来捕获视频 音频 我的想法是 C Static 会有 C CLI 包装器 包装器将是托管 Dll C WPF UI 将使用此 Dll
  • 在克隆期间更改内部元素 id

    我正在单击按钮时克隆 DIV 元素 我可以更改正在克隆的 DIV 元素的 ID 值 但是是否可以更改内部元素的 id 在下面的代码中 我更改了 Id selection克隆时 我需要动态更改 id select div div class