getting .text() of children elements from jQuery()

Question

I'm having trouble to get the proper formatted texts of each child elements, either as an Array or in as text.

I had tried

var name= jQuery(".childOne").text(); var number = jQuery(".childTwo").text();

but it joins all the name/number text in name and number.

HTML is:

<span class="parent"><span class="childOne">David</span><span class="childTwo">541</span></span>
<span class="parent"><span class="childOne">Gruce</span><span class="childTwo">162</span></span>
<span class="parent"><span class="childOne">Proman</span><span class="childTwo">743</span></span>

and I need to generate output in multi-dim-array so that each child-element's-text can be figured out properly.

Preferred output can be in array or in any form.

Array
(
    0 = > array (
            0 => "David",
            1 => "541"
        ),

    1 = > array (
            0 => "Gruce",
            1 => "162"
        ),

    2 = > array (
            0 => "Proman",
            1 => "743"
        )
)

score 10 · Accepted Answer · answered Feb 11 '11 at 11:45

10

try this:

var data = [];

$('span.parent').each(function() {
    var $this = $(this);
    data.push({
        'name' : $this.find('span.childOne').text(),
        'number' : $this.find('span.childTwo').text()
    });
});

BTW: jQuery uses the Sizzle selctor engine. You should define the element type before the class, like span.parent. This is much more faster.

answered Feb 11 '11 at 11:45

BaggersIO

828
7
10

Another thing: If you access $(this) in the current scope more than once, you should use a seperate variable: like var $this. So, jQuery must not wrap the element twice, or more. – BaggersIO Feb 11 '11 at 11:48
@OpenCode: If you won't use the result literal, you can replace the push statement with the following code: data.push([$this.find('span.childOne').text(), $this.find('span.childTwo').text()]); – BaggersIO Feb 11 '11 at 12:55

Felix Kling · Answer 2 · 2011-02-11T13:06:43.010

2

If this is a fixed structure, you can do:

var data = [];

$('.parent').each(function() {
    data.push({
        'name': $(this).children('.childOne').text(),
        'number': $(this).children('.childTwo').text()
    });
});

Edit: Obviously forgot .text() ;)

edited Feb 11 '11 at 13:06

answered Feb 11 '11 at 11:35

Felix Kling

756,363
169
1,062
1,111

score 2 · Answer 3 · edited Jan 06 '17 at 00:25

2

I have made a working example

var array= [];


$('.parent').each(function(index) {
   array.push({
        'name': $(this).children('.childOne').text(),
        'number': $(this).children('.childTwo').text()
    });
  });
alert(array[0].name);

edited Jan 06 '17 at 00:25

Christian

3,798
2
22
40

answered Feb 11 '11 at 12:26

Kimtho6

6,024
9
39
56

Thank You Kim for your effort :) – OpenCode Feb 12 '11 at 09:51

score 0 · Answer 4 · answered Feb 14 '13 at 13:01

@Dyvor

BTW: jQuery uses the Sizzle selctor engine. You should define the element type before the class, like span.parent. This is much more faster.

Not true! Check this performance test. It is actually the other way around.

http://jsperf.com/jquery-class-selector-vs-type-class-selector

score 0 · Answer 5 · answered Feb 11 '11 at 11:37

0

$('.parent').each(function(index) {
     alert($(this).find('.childOne').text());
     alert($(this).find('.childTwo').text());
  });

After you can put them into an array

answered Feb 11 '11 at 11:37

alexl

6,751
3
23
29

getting .text() of children elements from jQuery()

5 Answers5