按类名查找元素

时间:2014-01-24 15:47:40

标签: javascript class find element

我有以下问题:

在我的身体里,我有这个div构造:

<div id="page-wrapper">
    <div id="page">
        <div id="page-content" class="page-inner">
            <div id="page-content-inner">
                <div class="box tagcloud">
                    <div class="modulcontent">
                        <div class="tagspopular tagcloud tagscloud tagcloud">
                            <span class="tag" >
                                <a class="tag-name" > test1</a>
                            </span>
                            <span class="tag">
                                <a class="tag-name" >test2</a>
                            </span>
                            <span class="tag">
                                <a class="tag-name" >test3</a>
                            </span>
                            <span class="tag">
                                <a class="tag-name" > test4</a>
                            </span>
                            <span class="tag">
                                <a class="tag-name" >test5</a>
                            </span>
                            <span class="tag">
                                <a class="tag-name" >test6</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我知道想用javascript选择带有“tag”-class的跨度。

我首先尝试了正常的javascript:

var elementArray;

elementArray = document.getElementsByClassName("tag");

for(var i = 0; i < elementArray.length; i++) {
    console.log(elementArray[i].className);
} 

但协议中没有任何内容 http://jsfiddle.net/42RJD/2/

然后我尝试了jquery:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-noconflict.js" type="text/javascript"></script>
<script src="jquery-migrate.js" type="text/javascript"></script>

<script type="text/javascript">
    var pre = $('.tag');

    pre.each(function(i, el){
        console.log( el );
        // OR
        console.log( this ); // will give you the element

        // suppose to get text
        console.log( $(el).text() ); // or $(this).text()
    });
</script> 

当我尝试这个时,我收到了错误:TypeError: $ is not a function var pre = $('.tag');

http://jsfiddle.net/42RJD/3/

我实际上不知道该怎么做。我从这里得到两个代码,但它仍然无法正常工作。 :(

1 个答案:

答案 0 :(得分:3)

在DOM完全加载时,您应该使用.ready()来执行代码。

$( document ).ready(function() {

    var pre = $('.tag');

    pre.each(function(i, el){
        console.log( el );
        // OR
        console.log( this ); // will give you the element

        // suppose to get text
        console.log( $(el).text() ); // or $(this).text()
    });

});

http://api.jquery.com/ready/