使用jquery将动态类添加到div

时间:2015-08-07 13:45:22

标签: jquery asp.net-mvc

我在定价表中有两个以上的重复类。为简单起见我只显示了2。我想要做的是添加课程&#34;首先&#34;到第一个<div class="column dt-sc-one-fourth">

  <div class="dt-sc-pricing-table">
    <div class="column dt-sc-one-fourth">
       <div class="dt-sc-pr-tb-col ">
                    <div class="dt-sc-tb-header">
                        <div class="dt-sc-price"> <sup> $ </sup><sub><span>from</span></sub>95 <span> / month</span> </div>
                        <div class="dt-sc-tb-title"> <h5>Unlimited ADSL</h5> </div>
                        <div class="dt-sc-buy-now">
                            <a class="dt-sc-button medium" href="" nom="residential-unlimited-adsl" taj="Residential">Read More</a></div>
                            </div>
                    <ul class="dt-sc-tb-content">
                        <li></li>
                    </ul>
    </div>
                     </div>
            <div class="column dt-sc-one-fourth">
                <div class="dt-sc-pr-tb-col ">
                    <div class="dt-sc-tb-header">
                        <div class="dt-sc-price"> <sup> $ </sup><sub><span>from</span></sub>99 <span> / month</span> </div>
                        <div class="dt-sc-tb-title"> <h5>Unlimited VDSL</h5> </div>
                        <div class="dt-sc-buy-now">
                            <a class="dt-sc-button medium" href="" nom="residential-unlimited-vdsl" taj="Residential">Read More</a></div>
                            </div>
                    <ul class="dt-sc-tb-content">
                        <li></li>
                    </ul>
    </div>
                     </div>

我试过

<script type="text/javascript">
    $(document).ready(function () {
        $('.dt-sc-one-fourth:first').addClass('first');
    });
    </script>

请帮忙

1 个答案:

答案 0 :(得分:0)

你的JQuery很好,如果你只对那个类的div感兴趣,你可以将它添加到你的选择器中:

$(document).ready(function () {
    $('div .dt-sc-one-fourth:first').addClass('first');
});

参见工作示例:https://jsfiddle.net/ddan/scwLyoLy/1/

在课程first上添加了css以突出显示。

.first {
    border: solid 1px red;
}

如果您仍然有错误,那可能是因为其他原因。尝试分离您的代码并运行它。

修改

基于评论:通过在JS代码的头部包含这一行,它可以帮助您调试问题:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

在使用和JQuery之前。