How to get ID value of first element with specific class in html by jQuery

Question

I have this HTML code:

    <div id="calc_pol_list">
       <li class="calc_li">
           <span class="right_list_number">1</span>
           <p id="120" class="calc_p"/>
       </li>
       <li class="calc_li">
           <span class="right_list_number">2</span>
           <p id="100" class="calc_p"/>
       </li>
    </div>

I need to get ID of first p: with jQuery and convert this ID to string.

I've tried this code:

    $('#calc_pol_list p:first').attr('id');

But it doesn't works.

How can I do this?

UPDATE: Here is my function:

function refreshCost(){
    if ( jQuery.isReady ) {
        stomCost = parseInt($('div#calc_pol_list calc_p:first').attr('id'));
        var cost = stomCost + scatCost + polCost;               
        $("#pre_cost").text(cost);
    };
};

Yes, my code is correct, if considered separately from the rest of the code. I realized what the problem is, but I do not know how to solve it. The problem is that these

I add after the Ajax request that is not in their original DOM. The form, which owns these

is inside the div. I read here that I need to make the form a direct child of the body, but in this case it's impossible.

it should work, if it is executed after dom ready [working](http://jsfiddle.net/arunpjohny/NVg5G/1/) - [not working](http://jsfiddle.net/arunpjohny/NVg5G/2/) — Arun P Johny, Oct 08 '13 at 12:49
id attribute should not begin with a number `" ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")"` [source](http://www.w3.org/TR/REC-html40/types.html) — Stphane, Oct 08 '13 at 13:00
Yes, my code is correct, if considered separately from the rest of the code. I realized what the problem is, but I do not know how to solve it. The problem is that these
I add after the Ajax request that is not in their original DOM. The form, which owns these
is inside the div. I read [here](http://forum.jquery.com/topic/reload-dom-after-injecting-form-elements) that I need to make the form a direct child of the body, but in this case it's impossible. — Shadow_, Oct 09 '13 at 10:05
I found another discussion of this problem [here](http://stackoverflow.com/questions/1550761/update-dom-after-insert-in-jquery), but I do not understand how to implement it in my code. — Shadow_, Oct 09 '13 at 10:07
Here is the function which I need to run after Ajax request: `function refreshCost(){ if ( jQuery.isReady ) { stomCost = parseInt($('div#calc_pol_list calc_p:first').attr('id')); var cost = stomCost + scatCost + polCost; $("#pre_cost").text(cost); }; };` — Shadow_, Oct 09 '13 at 10:08

score 4 · Answer 1 · answered Oct 08 '13 at 12:50

4

$('#calc_pol_list p').first().attr('id')

like this :)

answered Oct 08 '13 at 12:50

MAQU

552
2
12

score 3 · Answer 2 · answered Oct 08 '13 at 12:50

3

What about this:

$('#calc_pol_list p').eq(0).attr('id');

jsfiddle http://jsfiddle.net/krasimir/ppzqx/1/

answered Oct 08 '13 at 12:50

Krasimir

12,605
3
34
52

score 2 · Accepted Answer · answered Oct 14 '13 at 11:16

2

Solution is to use .ajaxStop

$(document).ajaxStop(function() {
    alert($('#calc_pol_list p').eq(0).attr('id'));
});

answered Oct 14 '13 at 11:16

Shadow_

150
1
14

score 1 · Answer 4 · answered Oct 08 '13 at 12:50

1

Try this:

$(document).ready(function(){ 
alert($('#calc_pol_list p:first').attr('id'));
});

answered Oct 08 '13 at 12:50

Vijay Verma

3,481
2
16
27

score 0 · Answer 5 · edited May 23 '17 at 12:05

0

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

See: What are valid values for the id attribute in HTML?

edited May 23 '17 at 12:05

Community

1
1

answered Oct 08 '13 at 12:53

Alex

2,224
1
13
25

score 0 · Answer 6 · edited Oct 08 '13 at 12:56

0

Create a variable and get variable in it e.g.

var content = $('#calc_pol_list > li p:first').attr('id');

and alert it you will get id as string e.g.

alert (content );

edited Oct 08 '13 at 12:56

Harry

80,224
23
168
185

answered Oct 08 '13 at 12:56

Jitendra Mehta

9
5

Please format code blocks by using (a) 4 space indenting or (b) selecting the code block and clicking on `{}` button in button bar or (c) selecting code block and clicking Ctrl + K. Formatted code makes the answer easier to read :) – Harry Oct 08 '13 at 12:58

How to get ID value of first element with specific class in html by jQuery

6 Answers6