樣式奇數和偶數同級元素 - 不包括那些設置爲顯示：無

Question

考慮以下元素：

<div class="accordion-content"> 
    <div><?php the_field('f_1'); ?></div> 
    <div><?php the_field('f_2'); ?></div> 
    <div><?php the_field('f_3'); ?></div> 
    <div><?php the_field('f_4'); ?></div> 
    <div><?php the_field('f_5'); ?></div> 
    <div><?php the_field('f_6'); ?></div> 
    <div><?php the_field('f_7'); ?></div> 
    <div><?php the_field('f_8'); ?></div> 
    <div><?php the_field('f_9'); ?></div> 
    <div><?php the_field('f_10'); ?></div> 
    <div><?php the_field('f_11'); ?></div> 
</div> 

和造型

.accordion-content div:empty{display: none} 

.accordion-content div:nth-of-type(odd) { 
    background-color:#f0f0f1; 
} 

.accordion-content div:nth-of-type(even){ 
    background-color:#e1e1e4; 
} 

鏈接到靜態撥弄示例http://codepen.io/whispering_jack/pen/yMWoZj

如果用戶在顯示內容的字段中輸入數據，否則如果該字段爲空，則不顯示。

我想要實現的是條紋的交替顏色，但是當前的css也針對非顯示的元素，因此如果所有的字段沒有被填充顏色將不會交替。

任何人都可以提出一個解決方案，只針對顯示的div交替的背景顏色？ CSS或SCSS選項歡迎，js最後的手段。

謝謝。

編輯：仍在追逐一些援助。

Answer 1

好的，經過一些實驗並處理相關問題後，解決方法是使用jquery循環元素，如果跨度爲空然後從dom中刪除它。然後這允許div：empty類發射。

成功！

編輯： 按照要求提供的示例代碼，適用於高級自定義字段的Wordpress超輕動態手風琴，可輕鬆將其轉換爲插件。

HTML

<div class="accordion-content default"> 
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div> 
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div> 
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div> 
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div> 
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div> 
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div> 
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div> 
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div> 
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div> 
    <div><span><?php the_field(''); ?></span><span><?php the_field(''); ?></span></div> 
    <div><span>Years on Council</span><span><?php the_field(''); ?></span></div> 
</div> 

JQuery的

$(document).ready(function($) { 
//for this element, iterate each object 
$('.accordion-content div').each(function(i, obj) { 
    //the object 
var $this = $(this); 
    //if the object is empty 
if ($this.find('span:empty').length) { 
    //remove from dom (firing .element:empty:{display:none}) 
    $this.remove(); 
}; 
}); 


//Hide all the other panels except the first 
$(".accordion-content:not(:first)").hide(); 
//onclick 
$('#accordion').find('.accordion-toggle').click(function(){ 

    //Expand or collapse this panel 
    $(this).next().slideToggle('fast'); 

    //And, Hide the other panels 
    $(".accordion-content").not($(this).next()).slideUp('fast'); 

}); 
}); 
//set the background color 
var color="rgba(255,222,0,"; 
//change the background color of .element 
function repaint() { 
    //how many of this class? 
    var all = $('.accordion-toggle').length, 
     //opacity 1 - 10 divided by no. elements 
     total = 10/all; 
//iterate over each element 
    $('.accordion-toggle').each(function(i){ 
     //countdown the elements and for each divide by total element by 10 
    var opacity = (total*(all-i))/10, 
      //join $opacity to $color and finish it 
     newTone = color+opacity+")"; 
     //set the background color of the element to the new color 
    $(this).css('background-color',newTone) 
    }) 
} 
repaint() 

CSS

/*-------------------------------------------------------------- 
## LIGHTWEIGHT ACCORDIAN 
--------------------------------------------------------------*/ 
#accordion{width:100%;margin: 0 20px} 

#accordion .type-freeman{margin-bottom:0;} 

.accordion-toggle {cursor: pointer;} 
.accordion-content {display: none;} 
.accordion-content.default {display: block;} 

.accordion-toggle{ 
    margin:0; 
    padding:20px 20px; 
} 
.accordion-content div{margin:0;padding:16px 20px;} 

.accordion-content div:empty{display: none} 

.test{display: none} 

.accordion-content div:nth-of-type(odd) { 
    background-color:#f0f0f1; 
} 

.accordion-content div:nth-of-type(even){ 
    background-color:#e1e1e4; 
} 


.accordion-content div span:first-of-type{ 
text-align: left; 
    display: inline-block; 
    width: 50% 
} 

.accordion-content div span:last-of-type{ 
text-align: right; 
    display: inline-block; 
    width: 50% 
}