2

我有这个代码：

http://jsfiddle.net/VAkLn/6/

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

解决了：

我改变这个：price = self.next(".price"), To: price = $(".price"),

4

3 回答 3

2

您的第一个示例有效的原因是trandtd元素仅在元素中有效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元素，trandtd元素在结构中是有效的，并且会像你期望的那样被放置在 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不再是匹配元素集中每个元素的紧随其后的兄弟。

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

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

更新了你的小提琴。

于 2012-03-31T13:15:33.933 回答
1

.next() 选择器仅适用于当前元素中的兄弟姐妹。不知道为什么它在你的第一个例子中起作用......

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

于 2012-03-31T12:59:33.217 回答
0

下一个函数只查看直接兄弟。由于每个输入都包含在 td 标记中，因此它们没有直接的兄弟姐妹，因此

self.next(".price")

选择器不返回任何内容。你可以使用类似的东西

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

我不太确定为什么第一个片段有效。如果您检查 self 变量 (self.parents().foreach(...)) 的父级，则父级是 HTML -> BODY -> INPUT。我猜是因为 TR / TD 没有包含在 TABLE 元素中，所以输入标签变成了 BODY 的子元素？其他人可能对这种行为有更好的解释。

于 2012-03-31T13:44:57.380 回答