Question

点击链接时，我需要找到最近的具有id的div元素。在下面的示例中，它将是#Inputs或#Stages。

因此，如果我点击第1页至第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>

Answer 1

你遇到的问题是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>

单击该元素的最近Div Id

1 个答案: