Question

我一直在尝试动态地将类名添加到锚中但不知何故它不起作用。我的代码是：

HTML：

<div class="list-group" id="setActive">
    <a href="#">aaa</a>
    <a href="#">bbb</a>
    <a href="#">ccc</a>
</div>

JavaScript的：

 $(document).ready(function() {

    var setActive = document.getElementById('setActive'),
    var anchor = setActive.getElementsByTagName('a'),

    for (var i = 0; i < anchor.length; i++) {

        anchor[i].className = "list-item";
    }
 }

请帮忙！

Answer 1

我认为你在那里使用jQuery，所以你可以简化你的代码：

$(document).ready(function() {
    $( '#setActive a' ).addClass( 'list-item' );
});

Answer 2

试试这个

$(document).ready(function() {
    var anchors = document.getElementsByTagName('a');

    for (var i = 0; i < anchors.length; i++) {
        anchors[i].className = "list-item";
    }
 }

这将为您提供DOM中存在的所有锚标记的数组。

Answer 3

不需要Jquery就可以使用像这样的dom选择器

var setActive = document.getElementById('setActive'),
    anchors = setActive.querySelectorAll('a');
for (var i = 0; i < anchors.length; i++)
    anchors[i].className = "list-item";

您的代码存在不同类型的问题，首先您需要完成声明;不，即使你想使用，你也不必再从var开始了。

如果你只是使用JQuery检查dom加载，你可以跳过它。

demo here JSfiddle

Answer 4

由于您似乎不想使用jQuery，这里是本机版本，您只是有一些小的语法错误，代码通常很好！我把一些事情改成了我将如何做，但一般结构是完整的

http://jsfiddle.net/jjbdrzp5/3/

HTML

<div class="list-group" id="setActive">
    <a href="#">aaa</a>
    <a href="#">bbb</a>
    <a href="#">ccc</a>
</div>

CSS

.list-item {
    color: red;
}

JAVASCRIPT

document.addEventListener('DOMContentLoaded', function() {

    var setActive = document.querySelector('#setActive'),
        anchors = setActive.querySelectorAll('a');

    [].forEach.call(anchors, function(anchor) {
        anchor.classList.add("list-item");
    });

});

Answer 5

请参阅此小提琴：http://jsfiddle.net/jjbdrzp5/4/

您的代码无法正常工作的主要原因是sytax错误。在这里它被清理：

$(document).ready(function() {

    var setActive = document.getElementById('setActive'),
        anchor = setActive.getElementsByTagName('a');

    for (i = 0; i < anchor.length; i++) {
        anchor[i].className = "list-item";
    }

 });

但是你可以用jQuery做到这一切：

$(document).ready(function() {
    $('#setActive a').addClass('list-item');
});

还要确保在JS文件中正确地将$符号映射到jQuery：

(function($) {
    // docready etc etc here
}(jQuery));

希望有所帮助。

在锚中动态设置类不起作用？

5 个答案: