Javascript calculate total

StackOverflow https://stackoverflow.com/questions/9955942

  •  28-05-2021
  •  | 
  •  

Вопрос

I have this code :

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

When i add a table : http://jsfiddle.net/VAkLn/7/ this stop working. Why?

Solved:

I change This: price = self.next(".price"), To: price = $(".price"),

Это было полезно?

Решение

The reason your first example works is because tr and td elements are only valid in a table element. The browser effectively strips out those invalid tags in the DOM which leaves you with a structure similar to:

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

Check it out in Firebug or Webkit Inspector.

The next() selector works here because input.price is the immediately following sibling of each element in the set of matched elements.

As soon as you include a wrapping table element, the tr and td elements are valid in the structure and get placed in the DOM as you would expect:

<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>

This breaks the next() selector because input.price is no longer the immediately following sibling of each element in the set of matched elements.

The solution is to modify your jQuery selector for input.price to navigate the new structure:

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

Updated your fiddle.

Другие советы

The .next() selector only works for siblings in the current element. Not sure why it was working in your first example...

I forked your fiddle (http://jsfiddle.net/vansimke/n3W4F/) and added some navigation to go up to the parent tag, move to the next, and then find the ".price" element inside. See if it does what you want.

The next function only looks at the immediately sibling. Since each input is enclose in a td tag, they have no immediate siblings, so the 

self.next(".price")

selector returns nothing. You could use something like 

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

I'm less sure why the first snippet works. If you inspect the parents of the self variable (self.parents().foreach(...)), the parents are HTML -> BODY -> INPUT. I'm guessing that because the TR / TD are not enclosed in a TABLE element the input tags are made children of BODY instead? Someone else might have a better explanation for that behavior.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top