How to retrieve values contained in a span with jQuery?

Question

How to retrieve values contained in a span with jQuery?

Navigation

#1 by (4 votes)
#2 by (2 votes)

3

How do I get the values that are within 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>

php jquery

asked by anonymous 15.10.2014 / 19:30

2 answers

2

In your JavaScript code, you have:

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

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

You can solve the problem in two ways:

Click event for each element

Attach click event to every <a/> that will get the value inside the span contained in this <a/> making use of 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());
    });
});

Click Delegation

If you wrap all markup in a <div/> , you can attach a single event to that <div/> with delegation to <a/> contained in it by using the . 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.

15.10.2014 / 20:17

How to use Javascript to manipulate data from the database? [closed] How does the Oracle Express Edition database work?

score 4 · Accepted Answer

Actually with the code you have it will have to be:

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

This is because you can not have duplicate IDs. That is: using $('#valorSpan'); will return only the first found.

If you change the 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');

In the question it talks about how to retrieve values from a span and the code that it uses in the event handler points to the ancora $('#click') looking for ID

Prém: Note that the CSS selector for ID is # and class is . .

I'm not sure why it uses an anchor <a> there, I would do without anchor, only with span . But keeping your HTML structure, changing only to 'class =' valueSpan 'here is a working code: link

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

If, as indicated in the comment, you have more code inside the anchor and you need to get the value of the span, you can use this:

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