jQuery - テキストコンテンツに基づいて要素を動的に検索してスクロール

Question

専門用語のリストが上部にあり、その下にそれぞれの用語の個別の部分である「専門用語集」が作成されています。この用語をタイトルとして、その説明をその下に含む。

トップにある専門用語の1つをクリックすると、その用語を含むdivをh3タイトルとして見つけ出し、それをスクロールする機能を作成しようとしています。

これらの用語が事前にわからないので、ハードコーディングに頼ることはできません。例えば、ある用語が「知的財産」であり、別の用語が「知的財産弁護士」であることがあります。したがって、関数は完全一致を見つける必要があります。

これまでのところ、私は小文字に変換し、クリックされた用語を同じ名前のh3にマッチさせる関数を書くことに成功しました。私がうまくいかないのは、それを使ってスクロールする方法です。誰にも何か提案はありますか？私はまったくこれを完全に間違った方向に向けることができます。専門用語の用語の

例リスト：

<div class="jargonBusterDropDown"> 
    <div class="textWrapper"> 
     <p>attorney</p> 
     <p>copyright</p> 
     <p>chartered</p> 
     <p>intellectual property</p> 
     <p>intellectual property lawyer</p> 
     <p>licensing</p> 
    </div> 
</div> 

フル専門用語の用語のdiv要素の例

 <div class="fullWidthContentCard jargonBusterCard"> 
      <div class="fullWidthContentCard__title"> 
       <h3>Attorney <i class="fa fa-chevron-down" aria-hidden="true"></i></h3> 
      </div> 
      <div class="fullWidthContentCard__content"> 
       <p>DESCRIPTION GOES HERE</p> 
      </div> 
     </div> 

私のJS

$('.jargonBusterDropDown p').click(function(){ 
    var val = $(this).text().toLowerCase(); 
    var titles = []; 
    $('.fullWidthContentCard__title h3').each(function(i, e){ 
     titles.push($(e).text().slice(0, -1).toLowerCase()); 
    }); 
    var elementToScrollTo = titles.filter(function(title){ 
     return val === title; 
    }); 
    elementToScrollTo = elementToScrollTo.toString(); 
}); 

Answer 1

$('html, body').animate({scrollTop: $(object).offset().top}, 300 /*duration in milisec*/); 

ここで、objectはあなたが見つけたものです。 each（）関数内にある場合は、thisと書く必要があります。

編集：フルソリューション：

$(document).ready(function(){ 
    $('.jargonBusterDropDown p').click(function(){ 
     var val = $(this).text().toLowerCase(); 
     console.log(val); 
     $('.fullWidthContentCard__title h3').each(function(i, e){ 
      if($(e).text().slice(0, -1).toLowerCase().indexOf(val) >= 0) // val is found 
      { 
       console.log($(e)); 
       $('html, body').animate({scrollTop: $(e).offset().top}, 300 /*duration in milisec*/); 
       return false; // Use this if you want to stop and scroll to the first object found. Otherwise you will scroll to the last. 
      } 
     }); 
    }); 
}); 

Answer 2

あなたは、contains selectorを使用可能、それと大文字小文字の区別のために注意する必要がスクロールする要素を見つけたいです！

それはelement.offset().top

$('.jargonBusterDropDown p').click(function() { 
 
    var val = $(this).text().toLowerCase(); 
 
    $('html, body').animate({ 
 
    scrollTop: $('.fullWidthContentCard__title h3:contains(' + val + ')').offset().top 
 
    }, 2000); 
 

 
});

.jargonBusterDropDown { 
 
    margin-bottom: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="jargonBusterDropDown"> 
 
    <div class="textWrapper"> 
 
    <p>attorney</p> 
 
    <p>copyright</p> 
 
    <p>chartered</p> 
 
    <p>intellectual property</p> 
 
    <p>intellectual property lawyer</p> 
 
    <p>licensing</p> 
 
    </div> 
 
</div> 
 

 
<div class="fullWidthContentCard jargonBusterCard"> 
 
    <div class="fullWidthContentCard__title"> 
 
    <h3>attorney <i class="fa fa-chevron-down" aria-hidden="true"></i></h3> 
 
    </div> 
 
    <div class="fullWidthContentCard__content"> 
 
    <p>DESCRIPTION GOES HERE</p> 
 
    </div> 
 
</div>

で取得要素のオフセットに簡単にスクロールですその後