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 controls = $（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");

等

Answer 2

您需要找到子元素，然后从

获取属性

$(".nav-host-tab").click(function(e){
    //find the child element of .nav-host-tab
    var a = $(this).find('a');
    a.attr('aria-controls');
});

Answer 3

您点击的元素没有~所以需要找到现有元素

aria-controls

Answer 4

我希望这有帮助：）

＆＃13;

$(".nav-host-tab").click(function(e){
    e.preventDefault();
    var ariaControls = $(this).find("a[data-toggle=tab]").attr("aria-controls");
    alert(ariaControls);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

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

4 个答案: