javascript - 如何访问这个html元素的属性？

Question

我正在尝试访问已单击的 html 元素的属性 (aria-controls)。

这是我的代码:

$(".nav-host-tab").click(function(e){
    alert($(this).html());
    // Try to access the aria-controls attribute of the clicked element
});

这是 .nav-host-tab 元素的 html 上下文:

<li id="nav-host-status-tab" role="presentation" class="nav-host-tab active">
    <a href="#host-status" aria-controls="host-status" role="tab" data-toggle="tab">
        <i class="fa fa-tachometer"></i> Status
    </a>
</li>

声明:

alert($(this).html());

返回这个 html 字符串，我可以在其中清楚地看到我正在寻找的属性:

<a href="#host-status" aria-controls="host-status" role="tab" data-toggle="tab">
        <i class="fa fa-tachometer"></i> Status
</a>

所以我尝试使用以下方式访问 aria-controls 属性:

alert($(this).data('aria-controls'));

但它返回:

undefined

再次尝试:

alert($(this).attr('aria-controls'));

它还返回:

undefined

如何访问属性 aria-controls？

Answer 1

您尚未向我们提供您的 HTML 结构，但如果您在 $(this).html() 返回的 HTML 中看到它，但是$(this).attr("aria-controls")不返回它，它必须位于后代元素上，您可以使用 find 找到它(然后在该元素上使用attr):

var control = $(this).find("a[href='#host-status'][aria-controls]").attr("aria-controls");

该选择器的某些部分可能是可选的，具体取决于 .nav-host-tab 中的完整 HTML 结构。 .

现在您已经向我们展示了结构，它是一个子元素，而且实际上是唯一子元素，因此:

var controls = $(this).children().attr("aria-controls");

或者如果您想更具体:

var controls = $(this).children("a").attr("aria-controls");

或

var controls = $(this).children("[aria-controls]").attr("aria-controls");

等等