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

Answer 1

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

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

• Nitish Kumar: Thanks. You've always helped me.:)
• Milind Anantwar: @NitishKumar: glad it helps. your comment made my day :)

Answer 2

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

• Nitish Kumar: There can be more number of h2, p, a tags apart from this, I wanted to have child elements.
• Shantanu Madane: 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