jQuery - get child element of elements in array

Question

I have a following HTML:

<div id="div1">
   <span class="icon"></span>
   <span class="text"></span>
</div>
<div id="div2">
   <span class="icon"></span>
   <span class="text"></span>
</div>
<div id="div3">
   <span class="icon"></span>
   <span class="text"></span>
</div>
<div id="div4">
   <span class="icon"></span>
   <span class="text"></span>
</div>

Then I have some business logic in JavaScript do decide what div elements to put in array:

var arr = [];
for(i = 1; i <= 4; i++) {
  if(someExpression) arr.push($("#div" + i));
}

The question: Is it possible to get all spans with class "text" from elements in arr (without using $(arr).each or for loop)?

I tried a simple things below, but they don't work..

$(arr).find(".text");
$(".text", $(arr));
$(".text", arr);

Thanks

Why are you putting jQuery objects into an array instead of a jQuery collection? — Barmar
– Barmar, Commented Dec 24, 2013 at 16:11
The example I showed is very simplified. Actually I work with angular directives and I manage the array of "$elements" in some helper service. — Alex Dn
– Alex Dn, Commented Dec 24, 2013 at 16:13

Denys Séguret · Accepted Answer · 2013-12-24 16:13:59Z

3

You can use a disguised loop :

var texts = arr.map(function(div){ return div.find('.text') });

Starting from your existing arr array, there's not really a way to avoid a kind of loop.

But note that it would simpler to do

var texts = $('#div1,#div2,#div3,#div4').find('.text');

or if you don't have other divs whose id starts with div :

var texts = $('[id^=div] .text');

edited Dec 24, 2013 at 16:13

answered Dec 24, 2013 at 16:07

Denys Séguret

384k90 gold badges813 silver badges779 bronze badges

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

3 Comments

Alex Dn Over a year ago

Ok, it looks like there no choice except of using some kind of loop. Thanks

Denys Séguret Over a year ago

@AlexDn What's the problem with loops ? Any time you do something there are a lot of hidden loops involved.

Alex Dn Over a year ago

No problem with loops, just thought I can use the "hidden" jQuery loop instead of writing my own...

Guffa · Accepted Answer · 2013-12-24 16:20:43Z

2

You have an array of jQuery objects, that's why you can't create a jQuery object from the array.

Put the elements in the array instead:

var arr = [];
for(i = 1; i <= 4; i++) {
  if(someExpression) arr.push($("#div" + i)[0]);
}

Then you can create a jQuery object from the array, and using find works fine to find the elements:

var texts = $(arr).find(".text");

Demo: http://jsfiddle.net/Guffa/Wu92L/

answered Dec 24, 2013 at 16:20

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

José Gómez · Accepted Answer · 2013-12-24 16:15:29Z

-1

why don't you just select all div.text?

var arr = $(".text");

answered Dec 24, 2013 at 16:15

José Gómez

1127 bronze badges

2 Comments

Alex Dn Over a year ago

It not helps me so much, you missed the point...I don't need all ".text", i need the text from specific divs only.

José Gómez Over a year ago

well, you need loops or in the wrost case, you can do it with recursion.

Collectives™ on Stack Overflow

jQuery - get child element of elements in array

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related