How to redeem the values contained in a span with jQuery?

Question

How to take the values that are inside a span? For example:

 <?php
    $total_prod = $this->totalRegistros($sql_prod);
    $preco=$this->getPreco();

    for($j=0;$j<$total_prod;$j++){
       echo"
          <div>
             <a href='#' class='click'>
                <span id='valorSpan'> $preco </span>
             </a>
          </div>
       ";
    }
 ?>

 <script>
    $(document).ready(function(){
       $('#click').click(function(){
          pegarPreco = parseFloat(valoSpam);
       });
    });
 </script>

Answer 1

In fact with the code that has to be:

var spans = $('.click > span'); // ou somente $('.click span');

This is because you cannot have duplicate Ids. Ie: use $('#valorSpan'); will return only the first found.

If you change HTML/PHP to use classes :

for ($j=0; $j < $total_prod; $j++){
   echo "
      <div>
         <a href='#' class='click'>
            <span class='valorSpan'> $preco </span>
         </a>
      </div>
   ";
}

then you can do:

var spans = $('.valorSpan');

Prim: In the question talks about how to rescue values of a span and the code you use on Event Handler points to the anchor $('#click') looking for ID. Note that the CSS selector for ID is # and class is ..

I’m not sure why you use an anchor <a> then, I would do without anchor, only with the span. But keeping its HTML structure, only changing to `class='valuSpan' is here a code working: http://jsfiddle.net/50g5oxaw/

$(document).ready(function () {
    $('.click span').click(function (e) {
        e.preventDefault();
        pegarPreco = parseFloat(this.innerHTML);
        alert(pegarPreco);
    });
});

If, as indicated in the comment has more code inside the anchor and you need to fetch the value of span, you can use so:

$(document).ready(function () {
    $('.click').click(function(e) {
        e.preventDefault();
        pegarPreco = parseFloat($(this).find('span').html());
        alert(pegarPreco);
    });
});

Answer 2

In your Javascript code, you have:

$('#click').click(function(){ ... }

that will attach an event to the elements with the ID click. However, in your question HTML Markup you have no element with the ID click.

You can solve the problem in two ways:

1. Click event for each element

   Attach click event to each <a/> that will pick up the value within the span contained in that <a/> using the method .click():

   PHP

   <?php
   // ...
   echo '
   <div>
       <a href="#" class="click">
           <span class="valorSpan">'.$preco.'</span>
       </a>
   </div>';
   // ...
   ?>
   

   jQuery

   $(document).ready(function(){
       $('.click').click(function(e) {
           e.preventDefault();
           var pegarPreco = parseFloat($(this).find('.valorSpan').html());
       });
   });
   

2. Delegation of the click

   If you involve the whole of Markup in one <div/>, you can attach a single event to that <div/> with delegation to the elements <a/> contained therein making use of the method .on():

   PHP

   <?php
   echo '<div id="minhaWrapper">';
   
   // ...
   echo '
   <div>
       <a href="#" class="click">
           <span class="valorSpan">'.$preco.'</span>
       </a>
   </div>';
   // ...
   
   echo '</div>';
   ?>
   

   jQuery

   $(document).ready(function(){
       $('#minhaWrapper').on("click", 'a', function(e) {
           e.preventDefault();
           var pegarPreco = parseFloat($(this).find('.valorSpan').html());
       });
   });
   

Both solutions deal with your problem.

The second approach is preferable and valid if you are with jQuery V1.7 or higher as it results in a single event delegated to multiple elements on the page.