最近的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点击链接

回答

相关问题