jQuery检索页面上的多个.attr()

jQuery retrieve multiple .attr() on page

本文关键字：attr 检索 jQuery      更新时间：2023-09-26

新手-我知道我遗漏了一些简单的东西。

目标是使用data-orgid属性从这个href中检索orgid。

<a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="111">Claim Your Listing</a>
<a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="222">Claim Your Listing</a>
<a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="333">Claim Your Listing</a>

我可以使用以下jquery检索第一个实例的属性。

// Click - Claim Your Listing
$( "#orgAct-claim" ).click(function() {
    // Acquire orig from onClick attribute and set orgid.
    var orgid = $('#orgAct-claim').attr('data-orgid');
    alert(orgid);
});

点击此处:https://jsfiddle.net/riverecho/0b7vpyw4/

= = = = =

更进一步，通过将所有实例包装在另一个名为#listings的id中，我可以让属性至少为每个实例触发。但是，每个。click事件总是返回"111"的第一个字符串。

<div id="listings">
    <a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="111">Claim Your Listing</a>
    <a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="222">Claim Your Listing</a>
    <a class="claim" href="http://www.url.com" id="orgAct-claim" data-orgid="333">Claim Your Listing</a>
</div>

点击此处:https://jsfiddle.net/riverecho/w5eqguok/

= = = = =

如何将var设置为我单击的特定实例:分别为111、222或333 ?

首先，id必须是唯一的。所以不要有相同的id。如果需要，可以使用类。在这种情况下，您可以使用在回调中传递的this，如下所示:

$( "#orgAct-claim" ).click(function() {
    var orgid = $(this).attr('data-orgid');
    alert(orgid);
});

您的id应该始终是唯一的，所以我删除了它们。另外，您可以在click函数中使用$(this)来返回被单击的元素。由于您也可能不想转到锚标记中指定的href，因此我使用event.preventDefault()来阻止这种情况的发生。

$(function() {
  $(".claim").click(function(event) {
    // Acquire orig from onClick attribute and set orgid.
    var orgid = $(this).attr('data-orgid');
    alert(orgid);
    event.preventDefault();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="claim" href="http://www.url.com" data-orgid="111">Claim Your Listing</a>
<a class="claim" href="http://www.url.com" data-orgid="222">Claim Your Listing</a>
<a class="claim" href="http://www.url.com" data-orgid="333">Claim Your Listing</a>

根据W3C规范，具有相同ID的多个元素是无效的html。

当你的CSS选择器只有一个ID选择器时，jQuery使用原生文档。方法，它只返回具有该ID的第一个元素。

如果必须通过重复ID进行选择，请使用属性选择器:

$('a[id="orgAct-claim"]');

请查看jQuery ID选择器

所以在你的情况下，正如Amit Joki建议的，你可以使用:

$('a[id="orgAct-claim"]').click(function() {
    var orgid = $(this).attr('data-orgid');
    alert(orgid);
});
相关文章：