Question 357523 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – If hasClass then addClass to parent node

I am trying to add new class to the parent class if nodes has a certain class.

$(document).ready(function() {
  if ($(".row").hasClass("lock-icon")) {
    $(".row .lock-icon").parent(".content-box").addClass('locked-badge');
  }
});
.locked-badge {
  opacity: 0.2;
  cursor: not-allowed;
}
<div class="col-md-6 mb-5">
  <div class="content-box">

    <div class="row">
      <h3>Some rank name</h3>
      <div class="col">
        <div class="lock-icon">
          <i class="fa fa-lock">lock icon</i>
        </div>
      </div>
    </div>

    <div class="row">
      <p class="badges-text">
        Some rank description
      </p>
    </div>

  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

I also have tried this jQuery

$(document).ready(function(){
  var $locked = $('.content-box').hasClass('lock-icon');
  $($locked).each(function() {
    $(this).addClass('locked-badge');
  });
});

Still not working.

Tags:

2

Answers


  1. 0

    Instead of trying to locate the parent(s) of the element with the class lock-icon, consider trying to find out if the parent has a child with the class lock-icon

    $(function() {
  $('.content-box').each(function() {
    if ($('.lock-icon', $(this)).length) $(this).addClass('locked-badge');
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="col-md-6 mb-5">
  <div class="content-box">

    <div class="row">
      <h3>@lang($badge->rank_name)</h3>
      <div class="col">
        <div class="lock-icon">
          <i class="fa fa-lock">X</i>
        </div>                                      
      </div>
    </div>

    <div class="row">
      <p class="badges-text">
        @lang(html_entity_decode($badge->description))
      </p>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    No need to go for .hasClass(). Simply target that class and search for .closest() parent – in a single line of jQuery:

    $(".lock-icon").closest(".content-box").addClass("locked-badge");

    $(".lock-icon").closest(".content-box").addClass("locked-badge");
    .locked-badge {
  opacity: 0.2;
  cursor: not-allowed;
}
    <div class="col-md-6 mb-5">
  <div class="content-box">

    <div class="row">
      <h3>Some rank name</h3>
      <div class="col">
        <div class="lock-icon">
          <i class="fa fa-lock">lock icon</i>
        </div>
      </div>
    </div>

    <div class="row">
      <p class="badges-text">
        Some rank description
      </p>
    </div>

  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    or, in pure JavaScript:

    document.querySelectorAll(".lock-icon").forEach(elLock => {
  elLock.closest(".content-box").classList.add("locked-badge");
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search