Access Div Based on Another in JQUERY-CodePudding

How do I access the <a ....>General</a> base on this div I'm getting below on "test"?

test

<div
    role="tabpanel"
     
    id="collapseGeneral"
    aria-labelledby="collapseGeneral"
    style="height: auto"
  >
    <div >
      ...
    </div>
  </div>

GIVEN

<div >
  <div role="tab"  id="headingGeneral">
    <a
      data-toggle="collapse"
      role="button"
      aria-expanded="false"
      data-parent="#accordion"
                              
      href="#collapseGeneral"
      aria-controls="collapseGeneral"
      >General</a
    >
  </div>
  <div
    role="tabpanel"
     
    id="collapseGeneral"
    aria-labelledby="collapseGeneral"
    style="height: auto"
  >
    <div >
      ...
    </div>
  </div>
</div>

code

  console.log(jQuery(test).parent(), "parent");

CodePudding user response：

Looks like you want to find the matching aria-controls element for your <div>

Try this

// Find the matching aria-control
const control = $(`a[aria-controls="${test.id}"]`);

// Add the "collapsed" class
control.addClass("collapsed");

You could also match it by href but it wasn't exactly clear what your selection criteria was

const control = $(`a[href="#${test.id}"]`);

Here's a runnable demo...

// You don't need to redefine `test`,
// this is just emulating the variable in your question
// to make my answer runnable.
// IGNORE THIS LINE
const test = document.querySelector("#collapseGeneral");

// Find the matching aria-control
const control = $(`a[aria-controls="${test.id}"]`);

// now do something with `control`...
control.addClass("collapsed");

.collapsed { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<!-- minified HTML -->
<div > <div role="tab"  id="headingGeneral"> <a data-toggle="collapse" role="button" aria-expanded="false" data-parent="#accordion"  href="#collapseGeneral" aria-controls="collapseGeneral" >General</a > </div><div role="tabpanel"  id="collapseGeneral" aria-labelledby="collapseGeneral" style="height: auto" > <div > ... </div></div></div>