how to get values in an array in jQuery

Question

I'm having a following set of html codes:

<div class="carousel-inner" id="nitsslider">
        <div class="item active" style="background-image: url(../nits-img/global/templates/himu/slider/slide3.jpg)">
            <div class="carousel-caption">
                <div>
                    <h2 class="heading animated bounceInDown">'Himu' Onepage HTML Template</h2>
                    <p class="animated bounceInUp">Fully Professional one page template</p>
                    <a class="btn btn-default slider-btn animated fadeIn" href="#">Get Started</a>
                </div>
            </div>
        </div>
        <div class="item" style="background-image: url(../nits-img/global/templates/himu/slider/slide2.jpg)">
            <div class="carousel-caption">
                <div>
                    <h2 class="heading animated bounceInDown">Get All in Onepage</h2>
                    <p class="animated bounceInUp">Everything is outstanding </p> <a class="btn btn-default slider-btn animated fadeIn" href="#">Get Started</a>
                </div>
            </div>
        </div>
        <div class="item" style="background-image: url(../nits-img/global/templates/himu/slider/slide1.jpg)">
            <div class="carousel-caption">
                <div>
                    <h2 class="heading animated bounceInRight">Fully Responsive Template</h2>
                    <p class="animated bounceInLeft">100% Responsive HTML template</p>
                    <a class="btn btn-default slider-btn animated bounceInUp" href="#">Get Started</a>
                </div>
            </div>
        </div>
    </div>

I want the text values of h2 tags, p tags and a tag into an array, like I've the background image illustrated below:

$('#nitsslider > .item').each(function (i) {
    var sliderimage = [];
    var sliderheading = [];
    var sliderpara = [];
    var sliderbutton = [];
    sliderimage[i] = $(this).css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1');
    sliderheading[i] = $('.item > h2').text();
    console.log(sliderimage[i]);
    console.log(sliderheading[i]);
});

I want to use these values to appending into the code.

Please help me out guys. Thanks

Milind Anantwar · Accepted Answer · 2016-05-19 10:47:14Z

1

Use iteration context this along with find selector to find child element in it:

sliderheading[i] = $(this).find('h2').text();

answered May 19, 2016 at 10:47

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nitish Kumar Over a year ago

Thanks. You've always helped me.:)

Milind Anantwar Over a year ago

@NitishKumar: glad it helps. your comment made my day :)

Shantanu Madane · Accepted Answer · 2016-05-19 10:54:23Z

0

var p=[],h2=[],a=[];
$('p').each(function(){
p.push($(this).text());
});

$('h2').each(function(){
h2.push($(this).text());
});

$('a').each(function(){
a.push($(this).text());
});

//Merge all 3 of them if you want it in single array

answered May 19, 2016 at 10:54

Shantanu Madane

6155 silver badges15 bronze badges

2 Comments

Nitish Kumar Over a year ago

There can be more number of h2, p, a tags apart from this, I wanted to have child elements.

Shantanu Madane Over a year ago

You ll get all those tags whichever are on your DOM. Please Upvote if you are satisfied with the answer. you can use children() function inorder to get the child elements of those tags

Collectives™ on Stack Overflow

how to get values in an array in jQuery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related