John
John

Reputation: 4991

Check if a <li> contain <a> with a certain class

I have this and I want to check the first <li> who contains <a> with the class .selected.

I have tried this : $( "li a" ).first().hasClass('selected') but my <li> isn't detected.

Here is my HTML code.

<ul>
  <li>
    <a class="thumbnail selected">
     <img src="thumb1.jpg">
    </a>
  </li>
  <li>
    <a class="thumbnail unselect">
     <img src="thumb2.jpg">
    </a>
  </li>
  <li>
    <a class="thumbnail unselect">
     <img src="thumb3.jpg">
    </a>
  </li>
  <li>
    <a class="thumbnail unselect">
     <img src="thumb4.jpg">
    </a>
  </li>
  <li>
    <a class="thumbnail unselect">
     <img src="thumb5.jpg">
    </a>
  </li>
</ul>

Could you help me ?

Upvotes: 0

Views: 78

Answers (2)

nitish koundade
nitish koundade

Reputation: 801

For the first Selected anchor tag simply try this

$('li a.selected:first')

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388446

You can use .has() like

$('li:has(a.selected)').first().addClass('found')
.found {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a class="thumbnail selected">
      <img src="thumb1.jpg">
    </a>
  </li>
  <li>
    <a class="thumbnail unselect">
      <img src="thumb2.jpg">
    </a>
  </li>
  <li>
    <a class="thumbnail unselect">
      <img src="thumb3.jpg">
    </a>
  </li>
  <li>
    <a class="thumbnail unselect">
      <img src="thumb4.jpg">
    </a>
  </li>
  <li>
    <a class="thumbnail unselect">
      <img src="thumb5.jpg">
    </a>
  </li>
</ul>

Upvotes: 5

Related Questions