medium
medium

Reputation: 4236

jQuery get value within child div

I need to grab the text value of a child div.

<div id='first'>
    <div id='first_child'>A</div>
    <div id='second_child'>B</div>
    <div id='third_child'>C</div>
</div>

I am trying to grab the value B. I am currently trying this but it is not working,

var text_val = $('#first').next('#second_child').val();

Upvotes: 22

Views: 102911

Answers (8)

pyfork
pyfork

Reputation: 3955

If you need to go into lists, use this:

jQuery('.first > ul > li:nth-child(6)').text();

Example code gets the value of the 6th item in a list.

Upvotes: 0

Kountay Dwivedi
Kountay Dwivedi

Reputation: 27

For multiple elements with the same id:

var text_val = $('#first').children('#second_child').text();

For a single element with a particular id:

var text_val = $('#second_child').text();

Upvotes: 1

Buhake Sindi
Buhake Sindi

Reputation: 89199

Simple,

var text_val = $('#second_child').text();

Or your change,

var text_val = $('#first').children('#second_child').text();

This will return "B" from div of id "second_child"

UPDATE Changed the second solution to children() instead of nextAll().

Upvotes: 4

widyakumara
widyakumara

Reputation: 1234

you can simply:

var text_val = $('#second_child').text();

as pointed by previous answers. but, since you "need to grab the text value of a child div", i assume that the child div id probably not always available. you can try this instead:

var text_val = $('#first').children().eq(1).text();

where 1 is the index of the child div (since it count starts from zero)

Upvotes: 6

Sarfraz
Sarfraz

Reputation: 382881

........

var text_val = $('#first').children('#second_child').text();

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532695

You want to use children() and text() instead of val(). Although, since what you are selecting has an id (and ids must be unique), you could also simply select based on the id without involving the container element at all.

The val() method only works on input elements, textareas, and selects -- basically all form elements that contain data. To get the textual contents of a container, you need to use text() (or html(), if you want the mark up as well).

var text_val = $('#second_child').text(); //preferred

or

var text_val = $('#first').children('#second_child').text(); // yours, corrected 

Upvotes: 39

John Fisher
John Fisher

Reputation: 22717

next() and nextAll() traverse the siblings of the element, not the children. Instead, use "find()"

var text_val = $('#first').find('#second_child').html();

You use val() when dealing with elements like inputs and textareas. html() will return whatever is under the div (which works in your example). text() will return the text in the element (wich would also work in your example).

Your example also makes me suspicious of your design. If you have multiple ids set to "#second_child", your html is confused. Instead, use a class. However, if there's only one id "#second_child", then all you need is:

var text_val = $('#second_child').text();

Upvotes: 7

Teja Kantamneni
Teja Kantamneni

Reputation: 17482

Try this...

var text_val = $('#first > #second_child').text();

Upvotes: 4

Related Questions