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.

But how do you 'create' dynamically these DIVs??? Provide relevant code — A. Wolff, Apr 02 '14 at 13:32

score 3 · Accepted Answer · answered Apr 02 '14 at 13:33

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');

score 1 · Answer 2 · answered Apr 02 '14 at 14:34

1

Without the use of jquery, using css just add this selector with your style rules:

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

answered Apr 02 '14 at 14:34

Karim AG

2,166
15
29

score 0 · Answer 3 · answered Apr 02 '14 at 13:33

0

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

answered Apr 02 '14 at 13:33

Denat Hoxha

915
8
16

score 0 · Answer 4 · answered Apr 02 '14 at 13:36

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');
}

score 0 · Answer 5 · answered Apr 02 '14 at 13:36

0

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.

answered Apr 02 '14 at 13:36

The Alpha

143,660
29
287
307

ShinyJos · Answer 6 · 2014-04-02T14:14:34.247

0

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

edited Apr 02 '14 at 14:14

answered Apr 02 '14 at 14:00

ShinyJos

1,487
11
17

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

6 Answers6

Linked