基於內容動態添加類Jquery

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

來源

2017-06-02 Arun

您可以通過檢查每個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>

來源

2017-06-02 09:42:22

'}否則如果（CC && CB === 1）{ CLS = '按鈕'; }實際上不需要 –

在這裏，解釋對我和其他人更有用。 –

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

來源

2017-06-02 10:01:34 WaldemarIce

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>

來源

2017-06-02 10:04:10

基於內容動態添加類Jquery

回答

相關問題