CODEWITHSUNDEEP
jqueryhtml
user3386779
user3386779

Reputation: 7215

check child the given class in jquery

I want to check the parent div 'tabs' has the child with class 'nav-justified' in jquery .In my html block 'nav-justified' class is exist but shows 'class not exit' due to condition failed.how to check parent div 'tabs ' has the child 'nav-justified' with given class name.

jQuery(document).ready(function($) {
if($('#tabs').children().hasClass('nav-justified'))
{
alert('helloexist');
}else{
alert('class not exist');}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs">
	<div class="view view-tabs view-id-tabs view-display-id-block view-dom-id-f25d21847449ac13dbfa35f1bbd014d7">
		<div class="view-content">
			<ul class="nav  nav-justified tabs-section">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
	</div>
</div>

Upvotes: 0

Views: 57

Answers (2)

Alexander
Alexander

Reputation: 4537

Use CSS selectors to select specific element, then check the length of the collection:

if ($("#tabs .nav-justified").length) {
  alert("Exist");
} else {
  alert("The class is not exist");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs">
  <div class="view view-tabs view-id-tabs view-display-id-block view-dom-id-f25d21847449ac13dbfa35f1bbd014d7">
    <div class="view-content">
      <ul class="nav  nav-justified tabs-section">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 0

Milan Chheda
Milan Chheda

Reputation: 8249

Here is the change that I mentioned in comment above. You should find by class and check the length: 

jQuery(document).ready(function($) {
  if ($('#tabs').find('.nav-justified').length) {
    alert('helloexist');
  } else {
    alert('class not exist');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs">
  <div class="view view-tabs view-id-tabs view-display-id-block view-dom-id-f25d21847449ac13dbfa35f1bbd014d7">
    <div class="view-content">
      <ul class="nav  nav-justified tabs-section">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions