jquery - 滚动到具有特定类的特定标签名称

Question

这是我的 html 代码的样子：

<div class="code">
    <declaration class="2">
        toto
    </declaration>
    <identifier class="2">
        toto
    </identifier>
    <identifier class="3">
        toto
    </identifier>
    <identifier class="2">
        toto
    </identifier>
</div>

这是我的javascript：

function gotoDeclaration(){
    $(".code identifier").click(function goto() {
        var list = document.getElementsByClassName($(this).attr('class'));
        for (var i = 0; i < list.length; i++) {
            if (list[i].nodeName === 'declaration')
                $('html, body').animate(
                    {scrollTop: list[i].offset().top}, 
                    'fast');
            return false;
        }
    });
}

我想做的是，如果我单击带有标签名称标识符的元素，它会滚动到带有标签名称声明的元素，与标识符元素具有相同的类。

当我单击时没有任何反应。

该函数在其他一些工作函数之后被调用：

$(document).ready(function(){
gotoDeclaration();
highlightIdentifiers();
expandCollapse();
});

Answer 1

确实list[i]返回一个 HTML 元素。问题是您使用的是 jQuery 函数：list[i].offset().

要解决这个问题，请.eq改用：

$('html, body').animate(
    {scrollTop: list.eq(i).offset().top}, 
    'fast');

还有一种更好的编码方式。由于 jQuery 已经加载，请使用它！

function gotoDeclaration(){
    $(".code identifier").click(function goto() {
        var list = $('declaration.'+$(this).attr('class'));
        $('html, body').animate(
             {scrollTop: list.offset().top}, 
             'fast');
    });
}

Answer 2

你为什么要遍历所有元素？你不需要所有这些只是为了一个简单的任务。

试试这个：

function gotoDeclaration(){
    $(".code identifier").click(function goto() {
        var $dec = $('declaration.'+$(this).attr('class'));
        $('html, body').animate({scrollTop: $dec.offset().top}, 'fast');
    });
}


$(document).ready(function(){
  gotoDeclaration();
});

identifier,
declaration { height:400px; display:block; }
identifier { background-color:lightblue; cursor:pointer; }
declaration { background-color:lightgreen; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="code">
    <declaration class="2">
        declaration 2
    </declaration>
    <identifier class="2">
        identifier 2
    </identifier>
    <declaration class="3">
        declaration 3
    </declaration>
    <identifier class="3">
        identifier 3
    </identifier>
</div>