如何通过点击分解链接获得第二个跨度值?

<div class="priceStruct" id="priceStruct">
     <h3>Pallet Cost Structure</h3>

              <?php $i=1;
              foreach($price_structure as  $price_structure_list) {
                  $palletDetails  = $price_structure_list['min']." - ".$price_structure_list['max'];
              ?>
              <div class="display_content" id="price<?php echo $i; ?>">
                <span class="first price" id="first<?php echo $i; ?>" ><?php echo $palletDetails." Pallets";?></span>
                <span class="second price" id="second<?php echo $i; ?>">£<?php echo $price_structure_list['price'];?></span>
                <span class="third price"><a href="#" class="breakDown" >Click Here for Break Down</a></span>
              </div>

              <?php $i++; } ?>
            </div>

Try this. Class should be second_price instead of second price. Dont forget to include jQuery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

$(function(){
    $(".breakDown").click(function(){         
            spanValue  = $('.second_price').text();   
            alert(spanValue);// just to check     

     });
});

Solution 1:

Add this to your a tag:

onclick="alert($('#second<?php echo $i; ?>').text());"

So that it will result in:

<a href="#" class="breakDown" onclick="alert($('#second<?php echo $i; ?>').text());">Click Here for Break Down</a>

Solution 2:

You can also use jQuery's parent and siblings to find the correct span tag:

$(document).ready(function() {
    $('.breakDown').click(function() {
        alert($(this).parent().siblings('.second').text());
    });
});

The disadvantage of solution 2 is that you'll run in problems when the structure of your HTML code is changed (the a tag is no longer not a child of span etc.)