Add class to parent div of a button-CodePudding

I am struggling to add a class to the parent element of a button - I cant seem to work out the syntax to target just the parent of the <a> clicked - note I have many divs with the same markup, so i just want the parent <div> of the <a> clicked to have the class change...

Why does the below not work?

I want to add the class "singleBio_BGZIndexer" to the ".nectar-post-grid-item.single" <div>

$(function() {
  $(".culturePageTeamBiosWrapper .nectar-post-grid .nectar-post-grid-item.single a.teamBioChevron").click(function() {
    $(this).parent(".nectar-post-grid-item.single").addClass("singleBio_BGZIndexer");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <div >
        <div >
          <div >
            <a href="#" ></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

$(".culturePageTeamBiosWrapper .nectar-post-grid .nectar-post-grid-item.single a.teamBioChevron").click(function(){

event.preventDefault();

$(this).parents('.nectar-post-grid-item').addClass("singleBio_BGZIndexer")

});

.single.nectar-post-grid-item { background: yellow; }
.singleBio_BGZIndexer { background: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  data-has-img="true">
  <div  style="overflow: visible;">
    <div  style=""></div>
    <div  style=" background-color: #fbef62;" data-opacity="0.3" data-hover-opacity="0.4"></div>
    <div >
      <a  href="#" aria-label="123"></a>
      <div >
        <h3 ><a href="#"><span ><img src="cross-grey.svg" title="Read more" alt="Read more"></span><span>Title</span><span ><img src="arrow.svg" alt="Read more" title="Read more"></span>
         
         </a></h3>
        <p id="foliotItemDescription"></p>
        <p  id="foliotItemLocation"></p>
        <a href="#" ><img src="arrow.svg" title="View project" alt="View project"></a>

        
      </div>
      <div >
        <a href="#" ><img src="cross-grey.svg" alt="Close" title="Close"></a>
        <h3 style="margin-right: 50px;">Title</h3>
        <h5>Role</h5>
        <div >
          <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nisl malesuada interdum sagittis auctor eu vestibulum amet, ipsum lorem. Sit ultrices pharetra, a, sit. Nisl malesuada interdum sagittis auctor eu vestibulum amet. Nisl malesuada interdum
            sagittis. Lorem ipsum dolor sit amet. Malesuada interdum sagittis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nisl malesuada interdum sagittis auctor eu vestibulum amet, ipsum lorem. Sit ultrices pharetra, a, sit. Nisl malesuada
            interdum sagittis.</p>


          <h6 >BIO</h6>
          <a href="#" >CLICK ME</a>

        </div>
        <!-- end of TEAM BIO STUFF -->

      </div>
    </div>
  </div>
</div>

CodePudding user response：

Consider the following.

$(function() {
  $(".culturePageTeamBiosWrapper .nectar-post-grid .nectar-post-grid-item.single a.teamBioChevron").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("singleBio_BGZIndexer");
  });
});

.singleBio_BGZIndexer {
  border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <div >
        <div >
          <div >
            <a href="#" >Click Me</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

This seems to work just fine. You can use .parent() with entry to select the parent element.

CodePudding user response：

... the parent() method traverses to the immediate parent ...

-- https://api.jquery.com/parent/

Try closest() instead.

...the .closest() method searches through these elements and their ancestors ...

-- https://api.jquery.com/closest/#closest-selector

$(function() {
  $(".culturePageTeamBiosWrapper .nectar-post-grid .nectar-post-grid-item.single a.teamBioChevron").click(function() {
    $(this).closest(".nectar-post-grid-item.single").addClass("singleBio_BGZIndexer");
  });
});