CODEWITHSUNDEEP
javascripthtmljquery
supersize
supersize

Reputation: 14773

How can I get the class of a parent element?

I would like to find the class of the parent element of the child with .current.

var currentli = $('.nav').find('a.current').parent().attr('class');
console.log(currentli);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li class="tab1">
      <a href="#1" class="current">Welcome</a>
    </li>
    <li class="tab2">
      <a href="#2">About</a>
    </li>
    <!-- and some lists more -->
  </ul>
</div>

but it always throws me undefined

NOTE: I don't know which a currently has .current which is why I have to use the .find() method.

Upvotes: 26

Views: 102738

Answers (3)

Super Man
Super Man

Reputation: 11

jQuery(function($) {
  console.log($('.nav a.current').parent().prop('className'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li class="tab1">
      <a href="#1" class="current">Welcome</a>
    </li>
    <li class="tab2">
      <a href="#2">About</a>
    </li>
    <!-- and some lists more -->
  </ul>
</div>

Upvotes: 1

Ja͢ck
Ja͢ck

Reputation: 173542

Your code should already work, but it might be more reliable to access the property className instead:

jQuery(function($) {
  console.log($('.nav a.current').parent().prop('className'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li class="tab1">
      <a href="#1" class="current">Welcome</a>
    </li>
    <li class="tab2">
      <a href="#2">About</a>
    </li>
    <!-- and some lists more -->
  </ul>
</div>

Upvotes: 45

RaphaelDDL
RaphaelDDL

Reputation: 4480

This will work:

var currentli = $($('.nav').find('a.current')).parent().attr('class');
console.log(currentli);

I'm simply transforming the found collection into a jQuery object again.

See fiddle: http://jsfiddle.net/RaphaelDDL/wnW4u/

Ps.: If more than one a has class="current", only the first one will be retrieved.

Upvotes: 1

Related Questions