Question

我有以下标记：

<table>
    <tr>
        <td>2 <i class="increase_quantity hidden-print icon-plus-sign"></i> <i class="decrease_quantity hidden-print icon-minus-sign"></i></td>
        <td class="price_setup">0.0</td>
    </tr>
</table>

的jQuery

$(document).on('click', '.increase_quantity', function() {
    alert('Setup Price: ' + $(this).closest('td').siblings('td.price_setup').text());
    return false;
});

问题是结果是空白的。我实际上是在尝试parseFloat，但仍然不断获得NaN，所以刚刚接受了这一点。

更新

tr通过ajax请求附加到表

// ajax callback
// append result of ajax request
$('#line_items tbody:last').append(data);

小提琴：http://jsfiddle.net/f49V8/11/（有效）

Ajax响应是包含上面标记的有效HTML。

修改 - 完整代码

我用精梳齿梳理过这一切，老实说，看不出有什么不妥，所以要发布完整的相关代码，希望有人发现某些东西。

滑轨

class PriceListItemController < ApplicationController
  def get_info
    if params[:id] != ''

      product = PriceListItem.find_by_id(params[:id])

      total = product.price_setup + (product.price_rental * product.contract_length)

      next_item = params[:no_items].to_i + 1

      output = '<tr><td>' + next_item.to_s + '</td><td>' + product.product_type + '</td><td>' + product.description + '</td><td>1 <i class="increase_quantity hidden-print icon-plus-sign"></i></td><td class="price_setup">' + product.price_setup.to_s + '</td><td class="price_rental">' + product.price_rental.to_s + '</td><td class="contract_length">' + product.contract_length.to_s + ' months</td><td class="total">' + total.to_s + '</td></tr>'

      render :text => output
    end
  end

end

HTML

<div class="row-fluid">
    <table id="line_items" class="table table-striped table-hover">
        <thead>
            <tr>
                <th>#</th>
                <th>Item</th>
                <th>Description</th>
                <th>Quantity</th>
                <th>Setup Cost</th>
                <th>Rental Cost</th>
                <th>Contract Term</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr id="blank">
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
            </tr>
        </tbody>
    </table>
</div>

的jQuery

var no_items = 0;

$('#add_product').click(function() {
        $.ajax({           
            url: '/price_list_item/get_info', 
            data: { id: $('#products_list').val(), no_items: no_items },
            dataType: 'html',
            type: "GET",
            cache: false,           
            success: function(data) {
                no_items++;

                // append result of ajax request
                $('#line_items tbody:last').append(data);

                // remove blank row
                $('#blank').remove();

                var sub_total = 0;
                var vat;

                // update totals
                $('.total').each(function(i) {
                    sub_total += parseFloat($(this).text());
                });

                vat = sub_total * 0.2;
                total = vat + sub_total;

                $('#sub_total').text('£' + sub_total);
                $('#vat').text('£' + vat);
                $('#total').text('£' + total);

            },
            error: function(){
                alert('An error occurred, please refresh the page and try again');
            }   
        }); 

    });

 $(document).on('click', '.increase_quantity', function() {

        var quantity = parseInt($(this).parent().text());
        var new_quantity = quantity + 1;

        if (new_quantity > 1) {

            $(this).closest('td').html(new_quantity + ' <i class="increase_quantity hidden-print icon-plus-sign"></i> <i class="decrease_quantity hidden-print icon-minus-sign"></i>');

            // readjust total for this line item
            var setup_cost      = parseFloat($(this).closest('td').siblings('td.price_setup').text());
            var rental_cost     = parseFloat($(this).closest('td').siblings('td.price_rental').text());
            var contract_length = parseInt($(this).closest('td').siblings('td.contract_length').text());

            alert(setup_cost);

            var total = setup_cost + (rental_cost * contract_length);

            $(this).parent().parent().children('.total').text(total);

            // update totals
            $('.total').each(function(i) {
                sub_total += parseFloat($(this).text());
            });

            vat = sub_total * 0.2;
            total = vat + sub_total;

            $('#sub_total').text('£' + sub_total);
            $('#vat').text('£' + vat);
            $('#total').text('£' + total);

        }
        return false;
    });

Answer 1

<script>
jQuery(document).ready(function()
{
    jQuery(".increase_quantity").click(function()
    {
        alert('Setup Price: ' + $(this).parent('td').siblings('td.price_setup').html());
    });
});

</script>

 <table>
     <tr>
       <td>2 
       <i class="increase_quantity hidden-print icon-plus-sign">12</i>
       <i class="decrease_quantity hidden-print icon-minus-sign"></i>12</td>
       <td class="price_setup">10.0</td>
   </tr>
</table>

无法使用jQuery获取兄弟元素文本

1 个答案: