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

【问题标题】：Can't get sibling element text with jQuery无法使用 jQuery 获取兄弟元素文本
【发布时间】：2013-09-02 14:32:32
【问题描述】：

我有以下标记：

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

【问题讨论】：

您似乎错过了开头的 TR ？
抱歉，这是我在创建问题时的错误，当然我有，但在删除非必要标记时必须删除它。
你不能点击你的.increase_quantity元素，因为它是空的。如果你填写它似乎工作：jsbin.com/UdOmOqU/1
@dystroy - 你可以，如果它有样式，并且工作正常 -> jsfiddle.net/f49V8/1
能否请您创建一个小提琴或发布您剩余的代码，它可能会有所帮助。

标签： ajax jquery ruby-on-rails-2

【解决方案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>

【讨论】：