Question

我遇到了一种情况，我需要将一个名为“active”的类附加到一组动态创建的div中。我的问题是，我想只将“活动”类添加到动态创建的div集的第一个中，而不是没有它。

这是我的html示例。

 <!-- Begin Carousel -->   
 <div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1" class=""></li>
        <li data-target="#carousel" data-slide-to="2" class=""></li>
    </ol>

    <!-- Wrapper for slides -->
    <div id="CAROUSEL_CONTENTHERE" class="carousel-inner">

        <!-- DYNAMICALLY CREATED DIVS GO HERE -->

    </div>
 </div>

以下是动态创建的DIV的外观

        <div class="item bgwhite"> <!-- class active should append here. -->
            <div class="carousel-img-full">
                <a href="#"><img src="img/banner2.jpg" alt=""></a>
            </div>
        </div>

基本上我想要

        <div class="item bgwhite active"> 
            <div class="carousel-img-full">
                <a href="#"><img src="img/banner1.jpg" alt=""></a>
            </div>
        </div>
        <div class="item bgwhite">
            <div class="carousel-img-full">
                <a href="#"><img src="img/banner2.jpg" alt=""></a>
            </div>
        </div>
        <div class="item bgwhite">
            <div class="carousel-img-full">
                <a href="#"><img src="img/banner3.jpg" alt=""></a>
            </div>
        </div>

知道如何使用jquery来解决这个问题吗？感谢您抽出宝贵时间阅读本文。

Answer 1

添加div之后，您可以使用 .first() 获取第一个div item和bgwhite的div，然后添加类active使用 .addClass() ：

进行操作

将匹配元素集减少到集合中的第一个元素。

$('.item.bgwhite').first().addClass('active');

Answer 2

$("#CAROUSEL_CONTENTHERE > div:first-child").addClass("active");

Answer 3

您可以使用JQuery Append附加您想要的任何HTML ..然后使用:first选择器按第一个匹配的元素进行选择，然后使用addClass将活动类添加到那个元素..看到这个小提琴：

http://jsfiddle.net/jFIT/s4swZ/

var dynamicDiv = '<div class="item bgwhite"><div class="carousel-img-full"><a href="#"><img src="img/banner2.jpg" alt=""></a></div></div>';

$('#CAROUSEL_CONTENTHERE').append(dynamicDiv);
$('#CAROUSEL_CONTENTHERE').append(dynamicDiv);
$('#CAROUSEL_CONTENTHERE').append(dynamicDiv);

if(!$('#CAROUSEL_CONTENTHERE DIV.item.bgwhite:first').hasClass('active'))
{
    $('#CAROUSEL_CONTENTHERE DIV.item.bgwhite:first').addClass('active');
}

Answer 4

您可以试试这个（Example，例如active有background:red）：

$('.item.bgwhite:first').addClass('active');

您可以使用:first选择与班级匹配的第一个项目。

Answer 5

您可以使用以下代码将活动类添加到动态创建的div

var spanElement = $("#CAROUSEL_CONTENTHERE").find(".item :first");
    $(spanElement ).addClass("active");

请参阅以下jsfiddle链接以获取确切答案

http://jsfiddle.net/ShinyMetilda/J2rTh/

我在.active类中使用了一些虚拟样式。您可以根据需要设置它

Answer 6

不使用jquery，使用css只需在样式规则中添加此选择器：

.carousel-inner div:first-of-type {background:red;}

将类附加到一组动态创建的div的第一个div

6 个答案: