2012-03-31 5 views
2

私はこのコードを計算します。 なぜですか?Javascriptが総

が解決:

を私はこの変更: 価格= self.next( "価格 ")を、 へ: 価格= $("。価格")、

答えて

2

trtdの要素は、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のインスペクタでそれをチェックしてください。

input.priceは、一致する要素のセット内の各要素の直後の兄弟であるため、ここではセレクタが機能します。

とすぐにラップtable要素を含むよう、trtd要素は構造が有効であり、あなたが期待するようDOMに置かれます:input.priceがあるので

<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のセレクタを変更することです:

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

はあなたfiddleを更新しました。

1

.next() selectorは現在の要素の兄弟に対してのみ機能します。あなたの最初の例でそれがなぜ働いていたのか分かりません...

私はあなたのフィドル(http://jsfiddle.net/vansimke/n3W4F/)をフォークし、親タグに移動して次へ移動し、 ".price"要素内部。それがあなたが望むことをするかどうかを見てください。

+0

本当にありがとうございます。 – Geme

0

次の関数は、ただちに兄弟を調べます。各入力はtdタグで囲まれているため、直系の兄弟は存在しないため、

self.next(".price") 

セレクタは何も返しません。

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

なぜ最初のスニペットが機能するのかわかりません。自己変数(self.parents()。foreach(...))の親を調べる場合、親はHTML-> BODY-> INPUTです。私は、TR/TDがTABLE要素に囲まれていないので、入力タグはBODYの子要素になっていると推測しています。他の人がその行動のより良い説明をしているかもしれません。