滾動到特定的標籤名稱與特定的類

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>