如何检查 a href 是不是包含 aria-current。如果为 true，则对父级和兄弟级执行代码。使用 jQuery

Posted 2023-05-09

【中文标题】如何检查 a href 是不是包含 aria-current。如果为 true，则对父级和兄弟级执行代码。使用 jQuery

【英文标题】：how do I check if an a href contains aria-current. And if true execute code to parent and siblings. using jquery如何检查 a href 是否包含 aria-current。如果为 true，则对父级和兄弟级执行代码。使用 jQuery

【发布时间】：2020-02-03 06:23:11

【问题描述】：

我有一个标签。

<a href="#" aria-current="page">Disarray Body</a>

链接打开时。浏览器添加 ==>aria-current="page"。如何选择具有 aria-current="page" 属性的元素并向其父级和兄弟级执行代码？

我试过了。

var items = $('.menu-item>a');

if (items.hasattr("aria-current", "page") === true) 
        items.parent.css( "background-color", "red" );

但它清除为未定义。我如何让 jquery 找出女巫链接当前在浏览器中打开。又名=>aria-current="page"?

您可以在下面找到部分 html。

    <a href="http://bertconinx.com/category/portriats/">portriats</a>
    <ul class="sub-menu">
        <li id="menu-item-473" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-473">
                    <a href="http://bertconinx.com/2019/08/12/non-profit-profit/" aria-current="page">Disarray Body</a></li>
        <li id="menu-item-617" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-617">
                <a href="http://bertconinx.com/2019/09/16/girls/">#Girls</a></li>
    </ul>

    <a href="http://bertconinx.com/category/portriats/">Item2</a>
    <ul class="sub-menu">
        <li id="menu-item-412" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-473">
                    <a href="http://bertconinx.com/2019/08/12/non-profit-profit/" aria-current="page">object1</a></li>
        <li id="menu-item-619" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-617">
                <a href="http://bertconinx.com/2019/09/16/girls/">Object2</a></li>
    </ul>

【参考方案1】：

尝试使用Attribute Equals selector。

$('a[aria-current="page"]');

Fiddle

【参考方案2】：

我看到您正在尝试以不同的方式设置当前页面的样式。由于当前页面已经有aria-current="page"（应该如此），您可以在 CSS 中进行如下样式设置，您可以使用属性选择器：

[aria-curent="page"] 
  background-color: red;