在每个父DIV中更改第n个孩子的背景颜色

时间：2016-08-04 19:33:14

标签： javascript html css angularjs

我有HTML，如下所示。使用CSS，我想更改每个nth child div的{​​{1}}的背景颜色。如果我点击第一个更多信息按钮，我想更改每个div的第一个子div的颜色，依此类推。

div

4 个答案:

答案 0 :(得分：2)

首先，使用索引方法获取单击按钮的索引，然后可以使用第n个子选择器更改背景颜色。

以全屏模式查看解决方案，了解正在发生的事情 

var index = 1;
$(".button-container button").on('click', function(){
  // this will tell you which index you clicked
  $('.to-change div:nth-child('+index+')').css('background-color', 'white');
  index = $(this).index('button') + 1;
  $('.to-change div:nth-child('+index+')').css('background-color', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row" id="empListTable">   

                                <div class="form-group to-change col-md-12" style="padding-left: 35px;">
                                    <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold">
                                        Hired
                                    </div>
                                    <div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold">
                                        Screened
                                    </div>
                                    <div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold">
                                        Pre-Qualified
                                    </div>
                                    <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold">
                                        Approved
                                    </div>
                                </div>
                                <div class="form-group col-md-12" style="padding-left: 35px;">
                                    <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
                                       10
                                    </div>
                                    <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
                                       10
                                    </div>
                                    <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
                                        6
                                    </div>
                                    <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
                                       2
                                    </div>
                                </div>
                                <div class="form-group col-md-12" style="padding-left: 35px;">
                                    <div class="col-sm-3" style="font-size:12px;color:#888;">
                                        Total Number of <br /> Employees hired
                                    </div>
                                    <div class="col-sm-3" style="font-size:12px;color:#888">
                                        Employees screened <br /> via phone or web
                                    </div>
                                    <div class="col-sm-3" style="font-size:12px;color:#888">
                                       Via Screened <br />employees
                                    </div>
                                    <div class="col-sm-3" style="font-size:12px;color:#888">
                                        Employees have <br />recieved tax credits
                                    </div>
                                </div>
  <div class="form-group col-md-12 button-container" style="padding-left: 35px;">
                                    <div class="col-sm-3" style="font-size:8px">
                                        <button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
                                    </div>
                                    <div class="col-sm-3">
                                        <button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
                                    </div>
                                    <div class="col-sm-3">
                                        <button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
                                    </div>
                                    <div class="col-sm-3">
                                        <button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
                                    </div>
                                </div>

答案 1 :(得分：1)

由于您使用的是AngularJS，因此您可以添加ng-style并修改ng-click以更改要更改的div。单击更多信息按钮时更改引导行的相应列中数字的背景：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div class="row" id="empListTable" ng-app="">   

                            <div class="form-group col-md-12" style="padding-left: 35px;">
                                <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold">
                                    Hired
                                </div>
                                <div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold">
                                    Screened
                                </div>
                                <div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold">
                                    Pre-Qualified
                                </div>
                                <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold">
                                    Approved
                                </div>
                            </div>
                            <div class="form-group col-md-12" style="padding-left: 35px;">
                                <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold" ng-style="col0">
                                   10
                                </div>
                                <div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold" ng-style="col1">
                                   10
                                </div>
                                <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold" ng-style="col2">
                                    6
                                </div>
                                <div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold" ng-style="col3">
                                   2
                                </div>
                            </div>
                            <div class="form-group col-md-12" style="padding-left: 35px;">
                                <div class="col-sm-3" style="font-size:12px;color:#888;">
                                    Total Number of <br /> Employees hired
                                </div>
                                <div class="col-sm-3" style="font-size:12px;color:#888">
                                    Employees screened <br /> via phone or web
                                </div>
                                <div class="col-sm-3" style="font-size:12px;color:#888">
                                   Via Screened <br />employees
                                </div>
                                <div class="col-sm-3" style="font-size:12px;color:#888">
                                    Employees have <br />recieved tax credits
                                </div>
                            </div>
  <div class="form-group col-md-12" style="padding-left: 35px;">
                                <div class="col-sm-3" style="font-size:8px">
                                    <button type="submit" class="btn btn-primary btn-lg outline" ng-click="col0={'background-color':'red'}">More Info <i class="fa fa-arrow-down"></i></button>
                                </div>
                                <div class="col-sm-3">
                                    <button type="submit" class="btn btn-primary btn-lg outline" ng-click="col1={'background-color':'blue'}">More Info <i class="fa fa-arrow-down"></i></button>
                                </div>
                                <div class="col-sm-3">
                                    <button type="submit" class="btn btn-primary btn-lg outline" ng-click="col2={'background-color':'green'}">More Info <i class="fa fa-arrow-down"></i></button>
                                </div>
                                <div class="col-sm-3">
                                    <button type="submit" class="btn btn-primary btn-lg outline" ng-click="col3={'background-color':'yellow'}">More Info <i class="fa fa-arrow-down"></i></button>
                                </div>
                            </div>

转到angular ng-style了解更多示例。

答案 2 :(得分：0)

您可以使用CSS3 nth-child()选择器。

.parent > div:nth-child(1)
{
    background-color: blue;
}

如需更多参考，请转到here。

＆＃13;
＆＃13; 
div
{
  height: 50px;
  background: gray;
}
.parent > div:nth-child(1)
{
  background: blue;
}
＆＃13; 
<div class="parent">
  <div>div 1</div>
  <div>div 2</div>
  <div>div 3</div>
  <div>div 4</div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

如果您想要nth子和，请确保只使用此divs {/ 1>} 

div:nth-of-type(2) {
    background-color: red;
}

＆＃13;
＆＃13; 
div {
  min-height: 200px;
}

div > div {
  background-color: blue;
}

div > div:nth-of-type(2) {
  background-color: red;
}
＆＃13; 
<div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div>
  <div></div>
  <div></div>
  <div></div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题