向投资组合项目添加一个类以设置每隔三个项目的样式答案

【问题标题】：Adding a class to portfolio items to style every third item向投资组合项目添加一个类以设置每隔三个项目的样式
【发布时间】：2016-03-04 08:54:19
【问题描述】：

我有一个投资组合列表页面，该页面循环显示这样的帖子：

<div class="row"> 
    <!-- Loop though projects -->
    <?php 
        $args = array('post_type' => 'project');
        $the_query = new WP_Query( $args );
    ?>
    <?php 
        if (have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>  
            <a href="<?php the_permalink(); ?>">
                <div class="col-sm-6 project-entry">
                    <!--Add thumbnails to potfolio items and resize for responsive-->
                    <?php
                        $thumbnail_id = get_post_thumbnail_id();
                        $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true);
                    ?>
                    <!--Link images and titles to individual portfolio page -->  
                    <p>
                        <img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title();?> project image">
                    </p>
                    <div class="project-text">   
                        <h4>
                            <?php the_title(); ?> | <?php the_field('project_type_name_'); ?>
                        </h4>
                        <p><?php the_field('brief_description_'); ?></p>
                    </div>
                </div>
            </a>

我需要为每个第一、第二和第三个帖子设置样式。我认为最好的方法是为每个投资组合项目添加一个类。

所以添加需要添加：

class-one 到第一，第四等等。

class-two 到第二、第五等等。

class-three 到第三、第六等等。

这是最好的方法吗？我该怎么做？

谢谢。

编辑：让我再解释一下。我有一个投资组合列表页面，该页面链接到单个帖子页面。

每个列表都是一个图像（项目条目），当您滚动图像时，文本（项目文本）出现在背景图像的顶部，（在原始图像的顶部）。我希望每个第 1、第 4、第 7 个项目的悬停图像相同，每个第 2、第 5 和第 8 个项目不同的悬停图像，以及每个第 3、第 6 和第 9 个项目的另一个不同的悬停图像等。

这是正在使用的 CSS，（所以我正在尝试更改这部分：

 background: url('img/project-dark-grey.png');

    .project-entry img {
    width: 100%;
    margin: 30px 0;
    position: relative; 
    }

.project-text {
    position: absolute;
    z-index: 1;
    top: 7%;
    color: #fff;
    margin-right: 13px;
    padding: 24% 0;
    background: url('img/project-dark-grey.png');
    height: 381px;
    visibility: hidden;
    }


.project-entry:hover .project-text {
    visibility: visible;
    }

【问题讨论】：

class Example extends Portfolio ...？这样您就可以使用 $this-> 获得 Example 中的所有 Portfolio 属性
谢谢@KyleE4K 你能进一步解释一下吗？我的 JS/JQuery 是有限的..
扫描阅读很抱歉，以为你在哪里关于 php 类，没关系哈哈。如果解决了这个问题，请标记答案？:)

标签： php jquery css wordpress loops

【解决方案1】：

我需要为第一篇、第二篇和第三篇文章设置样式。

您可以使用nth-child

ul li:nth-child(3n+1) {
  color: green;
}
ul li:nth-child(3n+2) {
  color: blue;
}
ul li:nth-child(3n+0) {
  color: red;
}

<ul>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
  <li>Item
  </li>
</ul>

【讨论】：

我了解nth-child 是如何工作的，但是没有li。我需要在循环中定位项目吗？

【解决方案2】：

只需使用 nth-child 选择器。

p:nth-child(3n) {
    background: #ff0000;
} 
p:nth-child(3n+1) {
    background: #ff0000;
} 
p:nth-child(3n+2) {
    background: #ff0000;
}

【讨论】：

谢谢，但同样，没有 p。这些项目通过循环显示，因此 nth-child 不起作用。

【解决方案3】：

你也可以使用nth-of-type

li:nth-of-type(3n+0){
  /* CSS Here */
}
li:nth-of-type(3n+1){
  /* CSS Here */
}
li:nth-of-type(3n+2){
  /* CSS Here */
}

【讨论】：

【解决方案4】：

试试这个，取一个类名设置为索引 0 1 2 的类

$classes_arr = array('class-one','class-two','class-three');

在循环中增加计数器 $counter 和 $arr_key

$counter = 0;
$arr_key = 0;

所以总的代码应该是

    $classes_arr = array('class-one','class-two','class-three');
    $counter = 0;
    $arr_key = 0;

    if (have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); 
        $counter++;


        echo '<div class="col-sm-6 project-entry '.$classes_arr[$arr_key].' ">';
$arr_key++;    
if($counter%3 == 0){
            $arr_key = 0
        }


    endwhile;
    endif;

【讨论】：

【解决方案5】：

所以它有点像 nth-child，但我需要使用 .row。感谢所有回复的人，我真的很感激。

这就是最终奏效的方法：

.project-text {
  /* common styles for all */
  background: url('path/to/bg1.png');
}

/* selects .project-text within links 2, 5, 8,... */
/* Switch to background-image here in case you need to add more background properties to the earlier rule */
/* If you use the shorthand again here to only change the background image then you will lose any other previously set properties */
.row a:nth-child(3n + 2) .project-text {
  background-image: url('path/to/bg2.png');
}

/* selects .project-text within links 3, 6, 9,... */
.row a:nth-child(3n + 3) .project-text { /* same as 3n */
  background-image: url('path/to/bg3.png');
}

【讨论】：