how to use jquery to get value out of div

Question

How do I get the contents of a div using Jquery.

Here is my HTML:

<div class="DataRow" data-vendorid="67">
    <div class="DataColumn" style="width: 60%;">
        Barracuda
    </div>
    <div class="DataColumn" style="width: 20%; text-align: center;">
        1
    </div>
    <div class="DataColumn" style="width: 20%; text-align: center;">
        2
    </div>
</div>

Here is my Jquery:

$(function () {
    $('.DataRow').click(function () {
        // get value: Barracuda 
    });
});

There are 3 div's inside `.DataRow` div. Do you want to get the first div value? If you want Barracuda, you can use :first on children and get it .text() — Selvakumar Arumugam, May 15 '12 at 15:27
Has all been answered already: [How to find an element within an element](http://stackoverflow.com/questions/7386100/how-to-find-an-element-within-an-element). The jQuery [selector](http://api.jquery.com/category/selectors/) and [traversal](http://api.jquery.com/category/traversing/tree-traversal/) contain information about all the methods you can use to find a certain element. Then have a look at [Select inner text (jQuery)](http://stackoverflow.com/questions/1644342/select-inner-text-jquery). — Felix Kling, May 15 '12 at 15:37
I felt this was a duplicate at first too, but given that he doesn't have a unique class on the sub-div's, I think this a tricky question for a JQuery beginner, and not immediately apparent on how to solve / what keywords to zero in on. — Tom Halladay, May 15 '12 at 15:45

score 4 · Accepted Answer · answered May 15 '12 at 15:28

4

$(function () {
    $('.DataRow').click(function () {
        alert($(this).find(':first-child').text());
    });
});

Or:

$(function () {
    $('.DataRow').click(function () {
        alert($(this).children().first().text());
    });
});

answered May 15 '12 at 15:28

Alex

34,899
5
77
90

Eugene Trofimenko · Answer 2 · 2012-05-15T15:44:28.040

3

If you need to get content of the clicked div it might help you.

$(function () {
    $('.DataRow').click(function (event) {

        alert(event.target.innerHTML);
    });
});

DEMO 1

If you need to get only the first value:

$('.DataRow').click(function () {
    var first = $(this).children().eq(0).html();
    alert(first);
});

DEMO 2

edited May 15 '12 at 15:44

answered May 15 '12 at 15:31

Eugene Trofimenko

1,611
1
13
19

score 1 · Answer 3 · answered May 15 '12 at 15:31

1

If you need to get only "Baracuda", i.e. first div text, you could use innerHTML like this:

$(function () {
    $('.DataRow').click(function () {
        // get value: Barracuda 
        alert($(this).children("div")[0].innerHTML);
    });
});

Here is an example.

answered May 15 '12 at 15:31

Dovydas Navickas

3,533
1
32
48

3

Your example in the URL is absolutely wrong. Please modify it. – Eugene Trofimenko May 15 '12 at 15:35

score 0 · Answer 4 · answered May 15 '12 at 15:29

0

You could also use this:

var value=$(".DataColumn").html();

answered May 15 '12 at 15:29

karan k

947
2
21
45

score 0 · Answer 5 · answered May 15 '12 at 15:29

To get the contents of the first child:

$('.DataRow').click(function () {
    var first = $(this).children(":first").html();
});

To get the contents of the third child:

$('.DataRow').click(function () {
    var third = $(this).children(":eq(2)").html();
});

how to use jquery to get value out of div

5 Answers5