css - 设置奇数和偶数兄弟元素的样式 - 不包括设置为显示 :none 的元素

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

静态 fiddle 示例链接 http://codepen.io/whispering_jack/pen/yMWoZj

如果用户在字段中输入数据，它将显示内容，否则如果字段为空，则不会显示。

我想要实现的是条纹的交替颜色，但当前的 css 也针对未显示的元素，因此如果所有字段都没有填充颜色将不会交替。

任何人都可以提出一个解决方案来仅针对显示的 div 交替背景色吗？欢迎使用 CSS 或 SCSS 选项，js 最后一招。

谢谢。

编辑:仍在寻求一些帮助。

Answer 1

好的，经过一些实验并解决相关问题后，解决方案是使用 jquery 遍历元素，如果跨度为空，则将其从 dom 中删除。然后，这允许触发 div:empty 类。

成功!

编辑: 根据要求提供示例代码，适用于 Wordpress 的超轻型动态 Accordion ，可与高级自定义字段一起使用，轻松将其变成插件。

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