基于内容动态添加类Jquery

Question

我试图根据内容动态添加一个类。

• 如果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'); 
 
    } 
 

 
});

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

Answer 1

您可以通过检查每个content和button归类子的长度为每个wrapper喜欢这样做，

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

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() { 
 
\t \t $('.cta-wrapper').each(function() 
 
\t \t { 
 
\t \t \t var icontent = 0; 
 
\t \t \t var ibutton = 0; 
 
\t \t \t $(this).children().each(function(){ 
 
\t \t \t \t var getclass = $(this).attr("class"); 
 
\t \t \t \t if (getclass == 'cta-content') { 
 
\t \t \t \t \t icontent = parseInt(icontent) + 1; 
 
\t \t \t \t } 
 
\t \t \t \t if (getclass == 'cta-button') { 
 
\t \t \t \t \t ibutton = parseInt(ibutton) + 1; 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t \t if (icontent == 1 && ibutton == 2) { 
 
\t \t \t \t $(this).addClass('buttons'); 
 
\t \t \t } else if (icontent == 1 && ibutton == 1) { 
 
\t \t \t \t $(this).addClass('button'); 
 
\t \t \t } else if (icontent == 0 && ibutton == 1) { 
 
\t \t \t \t $(this).addClass('no-desc'); 
 
\t \t \t } 
 
\t \t }); 
 
\t });

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