使用 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 属性。

编辑 - 添加了一个字符串数组，并根据评论中的讨论更改了循环以对每个 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>

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

Setting attribute for anchor tag child node with Jquery

html

javascript

anchor

jquery

frontend