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

Asked

Viewed 5,819 times

3

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>
php jquery

2 answers

4


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);
    });
});

  • It was my mistake, I switched the "." by "#", but I think the answer you gave me does not suit me, because within the tag "<a>" has more content that I need to pick up, would there be another way to redeem this value without directly clicking on the tag "span"? I don’t know if I explained it right, if I don’t understand I repeat the question with a more complete code

  • @Vinicius added another solution at the end of the answer. It is important to put the real code in the question. If I’m not adapting my answer until I know all your code.

  • 1

    was just what I needed :D, thank you!

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.

Browser other questions tagged php jquery

You are not signed in. Login or sign up in order to post.