title: How to get ID value of first element with specific class in html by jQuery
body: <p>I have this HTML code:</p>
  
  <pre><code>    &lt;div id="calc_pol_list"&gt;
         &lt;li class="calc_li"&gt;
             &lt;span class="right_list_number"&gt;1&lt;/span&gt;
             &lt;p id="120" class="calc_p"/&gt;
         &lt;/li&gt;
         &lt;li class="calc_li"&gt;
             &lt;span class="right_list_number"&gt;2&lt;/span&gt;
             &lt;p id="100" class="calc_p"/&gt;
         &lt;/li&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I need to get ID of first p:  with jQuery and convert this ID to string.</p>
  
  <p>I've tried this code:</p>
  
  <pre><code>    $('#calc_pol_list p:first').attr('id');
  </code></pre>
  
  <p>But it doesn't works.</p>
  
  <p>How can I do this?</p>
  
  <p>UPDATE:
  Here is my function:</p>
  
  <pre><code>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);
      };
  };
  </code></pre>
  
  <p>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 <p> I add after the Ajax request that is not in their original DOM. The form, which owns these <p> 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. </p>