获取具有动态 ID 的单击 div 的属性答案

【问题标题】：Get attribute of clicked div with dynamic ID获取具有动态 ID 的单击 div 的属性
【发布时间】：2014-11-02 03:59:51
【问题描述】：

对于下面的代码，我需要使用动态生成的 ID 获取 div 的“角色”属性。

HTML：

<div id="renable0" role="0">
     false
</div>
<div id="renable1" role="1">
    true
</div>
<!-- THE LIST OF DIVS CONTINUES IN INCREASING INCREMENTS OF 1 -->

Javascript：

$("[id^='renable']").editInPlace({ // editInPlace is a jQuery plugin
    url: 'save.php',
    params: 'pos='+$(this).attr('role') // How can I get this role attribute for the clicked div?
});

【问题讨论】：

标签： javascript jquery html attr

【解决方案1】：

您需要使用.each() 循环：

$("[id^='renable']").each(function() {
    $(this).editInPlace({
        url: 'save.php',
        params: 'pos='+$(this).attr('role')
    });
});

如果editInPlace 允许params 选项成为一个函数就好了，就像其他一些jQuery 插件对类似选项所做的那样。但既然没有，你需要这样做。

顺便说一句，您对role 属性的使用与它打算用作ARIA 一部分的方式不匹配。标准角色类似于button 和menuitem。你不应该滥用这样的标准属性，或者编造自定义属性。如果您想在元素中添加额外的属性，请使用 data-XXX 元素，例如

<div id="renable0" data-role="0">

您可以在 jQuery 中使用 $(this).data('role') 访问它。

【讨论】：

【解决方案2】：

this 不会引用您的元素，您应该保留对它的引用：

// loop through your elements
$("[id^='renable']").each(function () {
    // keep reference to it
    var $elem = $(this);

    // make it editInplace
    $elem.editInPlace({
        url: 'save.php',
        params: 'pos='+$elem.attr('role')
    });
});

【讨论】：