CODEWITHSUNDEEP
jquery
Arun
Arun

Reputation: 67

Add Class Dynamically based on content Jquery

I'm trying to dynamically add a class based on the content.

Currently only the no-desc class is getting added to content wrapper. Please help

$('.cta-wrapper').children().each(function() {
  var getclass = $(this).attr("class");

  if (getclass == "cta-content cta-button cta-button") {
    $(this).parent().addClass('buttons');
  } else if (getclass == "cta-content cta-button") {
    $(this).parent().addClass('button');
  } else if (getclass == "cta-button") {
    $(this).parent().addClass('no-desc');
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Add Class Content-with-Buttons to CTA Wrapper -->
<div class="cta-wrapper">
  <div class="cta-content"></div>
  <div class="cta-button"></div>
  <div class="cta-button"></div>
</div>

<!-- Add Class content-with-button to CTA Wrapper -->
<div class="cta-wrapper">
  <div class="cta-content"></div>
  <div class="cta-button"></div>
</div>

<!-- Add Class no-desc-with-button to CTA Wrapper -->
<div class="cta-wrapper">
  <div class="cta-button"></div>
</div>

Upvotes: 0

Views: 79

Answers (3)

user6748331
user6748331

Reputation: 

$('.cta-wrapper').each(function() {
  if ($(this).children().filter('.cta-content').length)
    $(this).children('.cta-button').addClass('.desc-with-button')
  else
    $(this).children('.cta-button').addClass('.no-desc-with-buttons')
})

// Or as custom function

$.fn.addDesc = function(descClass, noDescClass) {
  this.each(function() {
    if ($(this).children().filter('.cta-content').length)
      $(this).children('.cta-button').addClass(descClass)
    else
      $(this).children('.cta-button').addClass(noDescClass)
  })
}

$('.cta-wrapper').addDesc('.desc-with-button', '.no-desc-with-buttons')

Upvotes: 0

Manav Sharma
Manav Sharma

Reputation: 187

jQuery(document).ready(function () {
		$('.cta-wrapper').each(function()
		{
			var icontent = 0;
			var ibutton = 0;
			$(this).children().each(function(){
				var getclass = $(this).attr("class");
				if (getclass == 'cta-content') {
					icontent = parseInt(icontent) + 1;
				}
				if (getclass == 'cta-button') {
					ibutton = parseInt(ibutton) + 1;
				}
			});
			if (icontent == 1 && ibutton == 2) { 
				$(this).addClass('buttons');
			} else if (icontent == 1 && ibutton == 1) {
				 $(this).addClass('button');
			} else if (icontent == 0 && ibutton == 1) {
				 $(this).addClass('no-desc');
			}
		});
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Add Class Content-with-Buttons to CTA Wrapper -->
<div class="cta-wrapper">
  <div class="cta-content"></div>
  <div class="cta-button"></div>
  <div class="cta-button"></div>
</div>

<!-- Add Class content-with-button to CTA Wrapper -->
<div class="cta-wrapper">
  <div class="cta-content"></div>
  <div class="cta-button"></div>
</div>

<!-- Add Class no-desc-with-button to CTA Wrapper -->
<div class="cta-wrapper">
  <div class="cta-button"></div>
</div>

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

You can do it by checking length of each content and button classed element for each wrapper like,

$('.cta-wrapper').each(function() {
  var cc=$(this).children('.cta-content').length,
  cb=$(this).children('.cta-button').length,
  cls;
  if(cc && cb>1){
    cls='buttons';
  } else if(cc && cb===1){
    cls='button';
  } else if(!cc && cb){
    cls='no-desc';
  }
  cls && $(this).addClass(cls);
});
.buttons{border:1px solid green;}
.button{border:1px solid orange;}
.no-desc{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Add Class Content-with-Buttons to CTA Wrapper -->
<div class="cta-wrapper">
  <div class="cta-content">C1</div>
  <div class="cta-button">B1</div>
  <div class="cta-button">B1</div>
</div>

<!-- Add Class content-with-button to CTA Wrapper -->
<div class="cta-wrapper">
  <div class="cta-content">C2</div>
  <div class="cta-button">B2</div>
</div>

<!-- Add Class no-desc-with-button to CTA Wrapper -->
<div class="cta-wrapper">
  <div class="cta-button">B3</div>
</div>

Upvotes: 2

Related Questions