Question

我有这段代码：

当我添加一个表格时： http://jsfiddle.net/VAkLn/7/ 这停止了工作。为什么呢？

解决：

我改变了这个： price = self.next（“。price”），至： price = $（“。price”），

Answer 1

您的第一个示例有效的原因是tr和td元素仅在table元素中有效。浏览器有效地删除了DOM中的那些无效标记，这些标记留下了类似于：

的结构

<body>
    <input type="input" size="3" class="qta">
    <input type="input" size="7" class="price">
    TOTALE: <input type="input" id="total" size="7" ;="">
</body>

在Firebug或Webkit Inspector中查看。

next()选择器在这里工作，因为input.price是匹配元素集中每个元素的紧随其后的兄弟。

只要包含table个包装元素，tr和td元素就会在结构中生效，并按照您的预期放入DOM中：

<body>
    <table width="520" border="0" align="center" cellpadding="3" cellspacing="0">
        <tbody>
            <tr>
                <td width="40" bgcolor="#009966" class="whyte">
                    <input type="input" size="3" class="qta">
                </td>
                <td width="100" bgcolor="#009966" class="whyte">
                    <input type="input" size="7" class="price">
                </td>
            </tr>
        </tbody>
    </table>
    TOTALE: <input type="input" id="total" size="7" ;="">
</body>

这打破了next()选择器，因为input.price不再是匹配元素集中每个元素的紧随其后的兄弟。

解决方案是修改input.price的jQuery选择器以导航新结构：

price = self.parents('tr').find(".price"),

更新了您的fiddle。

Answer 2

.next（）选择器仅适用于当前元素中的兄弟节点。不知道为什么它在你的第一个例子中工作......

我分叉你的小提琴（http://jsfiddle.net/vansimke/n3W4F/）并添加一些导航到父标签，移到下一个，然后在里面找到“.price”元素。看看它是否符合您的要求。

Answer 3

下一个功能只关注兄弟姐妹。由于每个输入都包含在td标记中，因此它们没有直接的兄弟，所以

self.next(".price")

选择器不返回任何内容。你可以使用像

这样的东西

self.parents('tr').find(".price").

我不太清楚为什么第一个代码片段有效。如果你检查自变量的父母（self.parents（）。foreach（...）），父母是HTML - ＆gt;身体 - ＆gt; INPUT。我猜测因为TR / TD没有包含在TABLE元素中，所以输入标签是BODY的子节点而不是？其他人可能对这种行为有更好的解释。

Javascript计算总数

3 个答案: