jQuery ID 选择器仅适用于第一个元素 [英] jQuery ID selector works only for the first element

问题描述

我有 3 个 ID 相同的按钮.我需要在点击时获取每个按钮的值.

这是我当前的 jQuery 脚本:

$("#xyz").click(function(){var xyz = $(this).val();警报(xyz)；});

但它只对第一个按钮有效，其他按钮的点击将被忽略.

解决方案

我有 3 个具有相同 ID 的按钮...

您的 HTML 无效.一个页面中不能有多个具有相同 id 属性值的元素.

引用规范:

<块引用>

7.5.2 元素标识符:id 和 class 属性

id = 名称 [CS]
此属性为元素分配名称.此名称在文档中必须是唯一的.

解决方案:将id改为class:

还有 jQuery 代码:

$(".xyz").click(function(){警报(这个.值)；//不需要 jQuery :$(this).val() 来获取输入的值.});

<块引用>

但它只对第一个按钮有效

jQuery #id 选择器 docs:

<块引用>

每个 id 值在一个文档中只能使用一次.如果为多个元素分配了相同的 ID，则使用该 ID 的查询将只选择 DOM 中第一个匹配的元素.但是，不应依赖这种行为；包含多个元素使用相同 ID 的文档无效.

如果您查看 jQuery 源代码，您会发现当您使用 id selecor-($("#id")) 调用 $ 时，jQuery 会调用原生 javascript document.getElementById 函数:

//句柄:$("#id")} 别的 {elem = document.getElementById(match[2]);}

不过，在规范中document.getElementById 的 a> 他们没有提到它必须返回第一个值，这是大多数(也许是全部?)浏览器实现它的方式.

演示

I have 3 buttons with same ID. I need to get each button's value when it's being clicked.

<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>

Here is my current jQuery script:

$("#xyz").click(function(){
      var xyz = $(this).val();
      alert(xyz);
});

But it works only for the first button, clicking on the other buttons are being ignored.

解决方案

I have 3 buttons with same id ...

You have invalid HTML. You can't have more than one element in a page with the same id attribute value.

Quoting the spec:

7.5.2 Element identifiers: the id and class attributes

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

Solution: change from id to 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>

And the jQuery code:

$(".xyz").click(function(){
    alert(this.value);
    // No need for jQuery :$(this).val() to get the value of the input.
});

But it works only for the first button

jQuery #id selector docs:

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

If you look at the jQuery source you can see when you call $ with an id selecor-($("#id")), jQuery calls the native javascript document.getElementById function:

// HANDLE: $("#id")
} else {
    elem = document.getElementById( match[2] );
}

Though, in the spec of document.getElementById they didn't mention it must return the first value, this is how most of (maybe all?) the browsers implemented it.

DEMO

这篇关于jQuery ID 选择器仅适用于第一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！