使用 Jquery 设置锚标记子节点的属性

Question

我正在尝试访问特定的锚标记并使用 jquery 为其赋予特定属性。 到目前为止，我已经能够为所有锚标签赋予属性。 如果我只想将“aria-label”属性赋予第二个或第三个 li 锚标记，我假设我会在查询代码中的某处传递 [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>

Answer 1

为什么不直接在 li 中直接针对 a 呢？ 如果您检查“a”元素 - 您可以看到 aria 属性已被应用。

编辑 - 已添加字符串数组并更改循环以根据评论中的讨论将不同的 label 应用于每个 li > a。 每个索引的 label 都显示在控制台中以演示结果，检查 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>

使用 Jquery 设置锚标记子节点的属性

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-02-25 22:33:13

使用 Jquery 设置锚标记子节点的属性

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-02-25 22:33:13

解决方案1
0 已采纳 2021-02-25 22:33:13