Closest Div Id to the element clicked on

Question

When clicking on a link, I need to find the closest div element that has an id. In the example below, it would be #Inputs or #Stages.

So if I click on Page1 thru 4, I need to have the div id #Inputs saved in a variable. If I click on Page5 thru 8, I need the div id #Stages saved in a variable.

I found this and it either does not work or I do not understand what I am getting back.

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

Can someone tell me how I can get the div id I need?

<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>

can you include the JS code your are using when you call that jquery method? — mcgraphix, Jul 18 '17 at 15:44
Your div doesn't have an ID, are you talking about the `` tag ID? — dsomel21, Jul 18 '17 at 15:45
@AlexBieg I would assume the OP doesn't know the `id` at runtime, hence needs to use DOM traversal. Could be wrong though. — Rory McCrossan, Jul 18 '17 at 15:47
I thought it had to do with not being the parent, which is why I thought leaving out .parent() would work. thanks for explaining it. — Wannabe, Jul 18 '17 at 16:46

score 0 · Accepted Answer · answered Jul 18 '17 at 15:45

The issue you have is that closest() goes up the DOM looking for parent elements, yet the div you're trying to target isn't a parent, it's a parent's sibling.

To do what you require you could instead use closest() to get the nearest tr, then use find() to get the required div. Also note that the id attribute values should not contain # characters. Try this:

$('.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>

Closest Div Id to the element clicked on

1 Answers1