jquery - Jquery 从 $(this) 中查找子元素

Question

我有一个表格，其中每一行都包含一个表格。见下文

<table>
<tr><th>Fee Type</th><th>Amount</th><th>% Discount</th><th>Discounted Amount</th><th>Payable to</th><th>Remove</th></tr>    
<tr>
   <form>
         <td></td>
         <td class="cost"></td>
         <td> <input /> </td>
         <td class="discount"></td>
         <td></td>
   </form>
<tr>
</table>

现在我的意图是有一个全局保存按钮，它将遍历每个表单并执行 ajax 发布。见下文

    function saveEditedFees(){
        $("#savefeechanges").click(function(){
            $("#feestable form").each(function(){
                alert( $(this).attr('id') );
            });
        });
    }

我的问题是使用 $(this) 访问“td”的值，用于 我尝试过的具有“成本”和“折扣”类的元素

alert( $(this).find("td").eq(2).html() );
alert($(this).siblings('.cost').text());
alert($("td .cost" ,this).text());

基本上，我正在尝试测试 中包含的值<td class="cost">是否等于<td class="discount">，这样我将有选择地做一个 ajax 帖子。

请帮忙。

Answer 1

标记无效。

你有一个<form>作为一个孩子<tr>。

在 Chrome 中，HTML 呈现为：

<tr>
   <form></form>
         <td></td>
         <td class="cost"></td>
         <td> <input> </td>
         <td class="discount"></td>
         <td></td>
</tr>

如您所见，<form>不再有任何内容。

请记住，它.eq()需要一个从零开始的索引，所以它应该是：

$(this).find("td").eq(1)

...获取.cost元素。

Answer 2

你的意思是在你的行中有一个空格，上面写着：

alert($("td .cost" ,this).text());

它应该是

alert($("td.cost", this).text());

请记住，上下文的this意思是this指表单元素，因此siblings()不起作用。我认为你在正确的轨道上$("td.cost", this)使用.html()or 或.text().

Answer 3

$(this).closest('form').find('.cost');

这类似于我在解释traversal时回答的另一个问题。

但是，您应该在继续之前重构您的 html，因为 TR 元素应该只包含 TD 或 TH。如果您觉得出于布局目的需要将一个表格嵌套在另一个表格中，那么就这样吧。在这种情况下，我会推荐 div，但打破表格约定肯定会导致 roa 崩溃。