文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Jquery设置锚标签子节点的属性

问使用Jquery设置锚标签子节点的属性
EN

Stack Overflow用户

提问于 2021-02-26 05:06:54

回答 1查看 45关注 0票数 0

我正在尝试访问一个特定的锚标签，并使用jquery给它一个特定的属性。到目前为止，我已经能够给所有的锚标签赋予属性。如果我只想给第二个或第三个li锚标签提供'aria-label‘属性，我假设我会在查询代码中的某个地方传递一个1或2的参数，但这样做并不成功。

<!DOCTYPE html>
<html lang="en">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Jquery Practice</title>
</head>
<body>
    <h1>Accessing specific elements Jquery</h1><hr>
    <div id="parent-div">
        <ul id="child-div">
            <li id="grandchild-1">
                <a href="https://www.google.com/"> 
                    <i class="fa fa-chain"></i>
                </a>
            </li>
            <li id="grandchild-2">
                <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">
                    <i class="fa fa-link"></i>
                </a>
            </li>
            <li id="grandchild-3">
                <a href="https://www.w3schools.com/js/default.asp">
                    <i class="fa fa-question"></i>
                </a>
            </li>
            <li id="grandchild-4">
                <a href="https://jquery.com/">
                    <i class="fa fa-cog"></i>
                </a>
            </li>
        </ul>
    </div>
</body>
<script>
    $(document).ready(function(){
        $('#parent-div').parent().find('li>a').attr('aria-label','Test');
    }); 
</script>
</html>

jquery

frontend

anchor

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-26 06:33:14

为什么不直接针对a中的li呢？如果你检查"a“元素，你可以看到aria属性已经被应用了。

EDIT -添加了字符串数组，并根据注释中的讨论对循环进行了更改，以对每个li >a应用不同的标签。每个索引标签都显示在控制台中，以演示结果，检查a元素将显示单独分配的aria-label。

$(document).ready(function(){
   const labels=["first", "second", "third", "fourth"];

    $('#parent-div li > a').each(function(index){
      const ariaLabel = labels[index] + ' label';
      
      $(this).attr('aria-label',ariaLabel);
      
      console.log(index,  ariaLabel)
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <div id="parent-div">
        <ul id="child-div">
            <li id="grandchild-1">
                <a href="https://www.google.com/"> 
                    <i class="fa fa-chain"></i>
                </a>
            </li>
            <li id="grandchild-2">
                <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">
                    <i class="fa fa-link"></i>
                </a>
            </li>
            <li id="grandchild-3">
                <a href="https://www.w3schools.com/js/default.asp">
                    <i class="fa fa-question"></i>
                </a>
            </li>
            <li id="grandchild-4">
                <a href="https://jquery.com/">
                    <i class="fa fa-cog"></i>
                </a>
            </li>
        </ul>
    </div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66376437

复制

相似问题

问使用Jquery设置锚标签子节点的属性
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Jquery设置锚标签子节点的属性EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Jquery设置锚标签子节点的属性
EN