Appending a class to the first div of a set of dynamically created divs

Question

I run in to a situation where I need to append a class called "active" in to a set of dynamically created divs. My issue is that I am suppose to only add the class "active" to the very first of the dynamically created div set and rest not have it.

Here is my html example.

 <!-- 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>

Here is what the dynamically created DIVs look like

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

So essentially I would like

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

Any idea how I can approach this using jquery? Thank you for taking your time to read this.

Answer 1

After appending your div, you can use .first() to get the first div with class item and bgwhite , then add class active to it using .addClass() :

Reduce the set of matched elements to the first in the set.

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

Answer 2

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

Answer 3

You can use JQuery Append to append any HTML you want.. and then use :first selector to select by the first matched element, then use addClass to add the active class to that element.. See this fiddle:

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

You may try this ( Example , for example active has background:red ):

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

You may use :first to select the first item matched with classes.

Answer 5

You can use the following code to add class active to the dynamically created div

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

Refer the following jsfiddle link for the exact answer

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

I have used some dummy style for .active class.You can set it as per your requirement

Answer 6

在不使用jquery的情况下，使用css只需将此选择器添加到您的样式规则中即可：

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