クリックした要素に最も近いDiv Id

Question

リンクをクリックすると、idを持つ最も近いdiv要素を見つける必要があります。下の例では#Inputsまたは#Stagesになります。

Page1〜4をクリックすると、div id #Inputsを変数に保存する必要があります。 Page5から8をクリックすると、div id #Stagesが変数に保存されている必要があります。

私はthisを見つけました。それは動作しないか、私が戻ってきていることを理解できません。

var closestAnchor = $(this).closest('div[id]'); 

私が必要とする部門IDをどのように得ることができますか？

<tr> 
    <td class='type'> 
     <div id="#Inputs" class='vertical-text'> 
      Inputs 
     </div> 
    </td> 
    <td class='cellData'> 
     <div class='links'> 
      <span class='sectionLabel'> 
       External Input 
      </span> 
      <div class='openLevelThree'><a id='a1' href='Page1.htm' title='No Tailoring'>Page1</a></div> 
      <div class='openLevelThree'><a id='a2' href='Page2.htm' title='No Tailoring'>Page2</a></div> 
      <div class='openLevelThree'><a id='a3' href='Page3.htm' title='No Tailoring'>Page3</a></div> 
      <div class='openLevelThree'><a id='a4' href='Page4.htm' title='No Tailoring'>Page4</a></div> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td class='type'> 
     <div id="#Stages" class='vertical-text'> 
      Stages 
     </div> 
    </td> 
    <td class='cellData'> 
     <div class='links'> 
      <span class='sectionLabel'> 
       External Input 
      </span> 
      <div class='openLevelThree'><a id='a5' href='Page5.htm' title='No Tailoring'>Page5</a></div> 
      <div class='openLevelThree'><a id='a6' href='Page6.htm' title='No Tailoring'>Page6</a></div> 
      <div class='openLevelThree'><a id='a7' href='Page7.htm' title='No Tailoring'>Page7</a></div> 
      <div class='openLevelThree'><a id='a8' href='Page8.htm' title='No Tailoring'>Page8</a></div> 
     </div> 
    </td> 
</tr> 

Answer 1

あなたが持っている問題がclosest()は親要素を探してDOMを上がるということです、まだあなたがターゲットにしようとしているdivが、それは親の兄弟だ、親ではありません。あなたがあなたの代わりに、必要なdivを取得するためにfind()を使用して、最寄りのtrを取得するためにclosest()を使用することができます必要が何をすべきか

。また、idの属性値には#文字を使用できません。これを試してみてください：

$('.openLevelThree a').click(function(e) { 
 
    e.preventDefault(); 
 
    
 
    var divId = $(this).closest('tr').find('div[id]').prop('id'); 
 
    console.log(divId); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="type"> 
 
     <div id="Inputs" class="vertical-text"> 
 
     Inputs 
 
     </div> 
 
    </td> 
 
    <td class="cellData"> 
 
     <div class="links"> 
 
     <span class="sectionLabel"> 
 
      External Input 
 
     </span> 
 
     <div class="openLevelThree"><a id="a1" href="Page1.htm" title="No Tailoring">Page1</a></div> 
 
     <div class="openLevelThree"><a id="a2" href="Page2.htm" title="No Tailoring">Page2</a></div> 
 
     <div class="openLevelThree"><a id="a3" href="Page3.htm" title="No Tailoring">Page3</a></div> 
 
     <div class="openLevelThree"><a id="a4" href="Page4.htm" title="No Tailoring">Page4</a></div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="type"> 
 
     <div id="Stages" class="vertical-text"> 
 
     Stages 
 
     </div> 
 
    </td> 
 
    <td class="cellData"> 
 
     <div class="links"> 
 
     <span class="sectionLabel"> 
 
      External Input 
 
     </span> 
 
     <div class="openLevelThree"><a id="a5" href="Page5.htm" title="No Tailoring">Page5</a></div> 
 
     <div class="openLevelThree"><a id="a6" href="Page6.htm" title="No Tailoring">Page6</a></div> 
 
     <div class="openLevelThree"><a id="a7" href="Page7.htm" title="No Tailoring">Page7</a></div> 
 
     <div class="openLevelThree"><a id="a8" href="Page8.htm" title="No Tailoring">Page8</a></div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>