最近的div ID點擊鏈接

當點擊一個鏈接時，我需要找到最近的div元素有一個id。在下面的例子中，它將是#Inputs或#Stages。最近的div ID點擊鏈接

所以，如果我點擊Page1到4，我需要將div ID #Inputs保存在一個變量中。如果我點擊第5頁到第8頁，我需要保存在變量中的div id #Stages。

我發現this它不是工作或我不明白我回來。

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

有人能告訴我如何得到我需要的div 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>

來源

2017-07-18 Wannabe

可以包括，當你調用jQuery的方法，您使用的是JS代碼？ – mcgraphix

您的div沒有ID，您是否在談論''標籤ID？ – dsomel21

既然所有的ID都是唯一的，你能不能只選擇ID？ –

你的問題是，closest()上升的DOM尋找父元素，然而div你想目標不是父母，這是父母的兄弟姐妹。

要做你所需要的，你可以改爲使用closest()以獲取最近的tr，然後使用find()來獲得所需的div。另請注意，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>

來源

2017-07-18 15:45:32

最近的div ID點擊鏈接

回答

相關問題