Question

我正在尝试根据内容动态添加一个类。

如果self.data = 10孩子有班级content-wrapper，cta-content，cta-button，我想将cta-button添加到desc-with-buttons。
如果content-wrapper孩子有课程content-wrapper，则cta-content添加课程cta-button
如果desc-with-button孩子没有content-wrapper且课程为cta-content，则添加课程cta-button

目前只有no-desc-with-buttons类被添加到内容包装器中。请帮忙

no-desc

$('.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');
  }

});

Answer 1

您可以通过检查每个content的每个button和wrapper分类元素的长度来完成此操作，

＆＃13;

$('.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);
});

＆＃13;

.buttons{border:1px solid green;}
.button{border:1px solid orange;}
.no-desc{border:1px solid red;}

＆＃13;

<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>

＆＃13;

Answer 2

$('.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')

Answer 3

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>

根据内容Jquery动态添加类

3 个答案: