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

问题描述

 <按钮
 
我有3个带相同ID的按钮，我需要在点击时获得每个按钮的值。 id =xyztype =buttonclass =btn btn-primaryvalue =1> XYZ1< / button> 
< button id =xyztype =buttonclass =btn btn-primaryvalue =2> XYZ2< / button> 
   

以下是我目前的 jQuery 脚本：

  $（＃xyz）。click（function（）{
 var xyz = $（this）.val （）; 
 alert（xyz）; 
}）; 
  

但它仅适用于第一个按钮，点击其他按钮时将被忽略。

解决方案

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

您的HTML无效，在同一个 id 中的页面中不能有多个元素。

引用规范：
$ b

7.5.2 元素标识符：id和类属性

id = name [CS]

此属性为元素指定名称。此名称在文档中必须是唯一的。

解决方案：从 id 至 class ，

 <按钮type =buttonclass =btn btn-primary xyzvalue =1> XYZ1< / button> 
< button type =buttonclass =btn btn-primary xyzvalue =2> XYZ2< / button> 
< button type =buttonclass =btn btn-primary xyzvalue =3> XYZ3< / button> 
  

和 jQuery代码：

  $（。xyz）。click（function（）{
 alert（this.value）; 
 //不需要jQuery ：$（this）.val（）获取输入的值。
}）; 
  

但它只适用于第一个按钮

jQuery #id 选择器 docs ：

每个id值只能在文档中使用一次。 如果多个元素被分配了相同的ID，那么使用该ID的查询将仅选择DOM中第一个匹配的元素。然而，不应该依赖此行为。包含多个使用相同ID的元素的文档无效。

如果您查看jQuery源代码， $ 带一个id selecor - （ $（＃id）），jQuery调用本地javascript document.getElementById function：

  // HANDLE：$（＃id） 
} else {
 elem = document.getElementById（match [2]）; 
} 
  

虽然在 spec of document.getElementById 他们没有提到它必须返回第一个值，这是浏览器实现它的大部分（也许是所有？）。

DEMO

I have 3 buttons with same id, I need to get each button value when he'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.

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