jQuery ID 选择器仅适用于第一个元素
jQuery ID selector works only for the first element
我有 3 个具有相同 ID 的按钮。我需要在单击每个按钮时获取每个按钮的值。
<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>
这是我当前的jQuery
脚本:
$("#xyz").click(function(){
var xyz = $(this).val();
alert(xyz);
});
但它仅适用于第一个按钮,单击其他按钮将被忽略。
我有 3 个具有相同 ID 的按钮...
您有无效的 HTML。网页中不能有多个元素具有相同的id
属性值。
引用规范:
7.5.2 元素标识符:id 和类属性
id = 名称 [CS]
此属性为元素分配名称。此名称在文档中必须是唯一的。
解决方案:从id
更改为class
:
<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>
而jQuery代码:
$(".xyz").click(function(){
alert(this.value);
// No need for jQuery :$(this).val() to get the value of the input.
});
但它仅适用于第一个按钮
jQuery #id
选择器文档:
每个 id 值只能在文档中使用一次。如果为多个元素分配了相同的 ID,则使用该 ID 的查询将仅选择 DOM 中第一个匹配的元素。但是,不应依赖此行为;具有多个元素使用相同 ID 的文档无效。
如果你看一下 jQuery 源代码,你可以看到当你用 id selecor-( $("#id")
调用$
时,jQuery 调用原生 javascript document.getElementById
函数:
// HANDLE: $("#id")
} else {
elem = document.getElementById( match[2] );
}
虽然,在document.getElementById
的规范中,他们没有提到它必须返回第一个值,但大多数(也许是全部?)浏览器都是这样实现它的。
演示
ID 表示"标识符",每个文档仅有效一次。由于此时您的 HTML 是错误的,因此某些浏览器会选择具有该 ID 的第一个元素,一些浏览器会选择最后一个出现的元素。
更改名称的 ID 将是一个很好的步骤。
然后使用$('button[name="xyz"]').click(function(){
根据我的经验,如果您使用$('button#xyz')
选择器,它将起作用。这是一个黑客,但它仍然是无效的HTML。
更改为类更好,但您可以使用属性 equals 选择器获取具有相同 id 的所有元素:
$('[id="xyz"]')
或者这只获取 id 为 xyz 的按钮:
$('button[id="xyz"]')
或者 id 为 xyz 的div:
$('div[id="xyz"]')
等。
或者,您可以使用"属性包含选择器"来获取ID包含"xyz"的所有元素:
$('[id*="xyz"]')
当然,这意味着所有 id 部分包含 "xyz" 的元素都将被选中。
如果您有多个具有相同 id 的元素,这也有效。
$("button#xyz").click(function(){
var xyz = $(this).val();
alert(xyz);
});
你可以在这里查看
如果你在容器中有相同的 id,你可以使用 on() 访问每个事件的每个元素
$("#containers").on("click","#xyz",function(){
alert($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="containers">
<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>
</div>
关于 on() 的信息在这里
您不能使用相同的 id,因为 id 在页面 HTML 中是唯一的。将其更改为类或其他属性名称。
$('attributename').click(function(){ alert($(this).attr(attributename))});
- 使用数据上的角度更改设置集合的第一个元素的动画
- 在javascript数组中推送多个值并获取第一个元素
- Angular js将只显示ng repeat中的第一个元素
- 使用+=运算符未定义对象中的第一个元素
- javascript window.addEventListener,覆盖了第一个元素的配置
- 如何访问 JSON 对象数组的第一个元素
- 第一个元素和最后一个元素之间的连续循环
- 要插入二叉树的第一个元素,请将其放在左边还是右边
- 向下滚动时覆盖页面的第一个元素或块
- 数组未发送所有元素,只获取第一个元素
- 创建每个数组的第一个元素的数组
- 只显示ng重复的第一个元素
- CKEditor:以小部件作为第一个元素,选择所有在Chrome中不工作的
- 从Web视图上显示的页面部分获取第一个元素
- 有没有更好的方法来访问用JQuery选择器选择的第一个元素
- JQuery验证仅适用于提交的表单中的第一个元素.[打算验证所有内容]
- jQuery导航菜单没有't更新第一个元素
- jQuery如何删除第一个元素前的逗号
- 如何获取数组第一个元素的范围
- 使用 Dart 时,我正在创建一个点击事件的 DOM 类.它只拾取第一个元素,我如何让它在所有元素上发射