2016-01-21 54 views
2

我有這樣的HTML:追加到div容器

<fieldset> 
    <legend>Incassi previsionali</legend> 
    <div class="sez-form"> 
     <table id="inc_prev"> 
     <tr> 
      <td> 
       <label>Mese: </label> 
       <select name="mese[]" id="mese[]"> 
        <option value="1">Gennaio</option> 
        <option value="2">Febbraio</option> 
        <option value="3">Marzo</option> 
        <option value="4">Aprile</option> 
        <option value="5">Maggio</option> 
        <option value="6">Giugno</option> 
        <option value="7">Luglio</option> 
        <option value="8">Agosto</option> 
        <option value="9">Settembre</option> 
        <option value="10">Ottobre</option> 
        <option value="11">Novembre</option> 
        <option value="12">Dicembre</option> 
       </select> 
      </td> 
      <td> 
       <label>Anno: </label> 
       <select name="anno[]" id="anno[]"> 
        <option value="<?php echo date("Y")-1; ?>"><?php echo date("Y")-1; ?></option> 
        <option value="<?php echo date("Y"); ?>" selected="selected"><?php echo date("Y"); ?></option> 
        <option value="<?php echo date("Y")+1; ?>"><?php echo date("Y")+1; ?></option> 
        <option value="<?php echo date("Y")+2; ?>"><?php echo date("Y")+2; ?></option> 
        <option value="<?php echo date("Y")+3; ?>"><?php echo date("Y")+3; ?></option> 
        <option value="<?php echo date("Y")+4; ?>"><?php echo date("Y")+4; ?></option> 
        <option value="<?php echo date("Y")+5; ?>"><?php echo date("Y")+5; ?></option> 
        <option value="<?php echo date("Y")+6; ?>"><?php echo date("Y")+6; ?></option> 

       </select> 
      </td> 
      <td><label>Percentuale: </label><input value="" size="15" maxlength="14" class="importo" name="percent[]" type="text"/>%</td> 
      <td><img class="addRow" src="../images/plus.png"></td> 
     </tr> 
    </table> 
    </div> 
</fieldset> 

當我專注於.importo輸入,然後集中出來我要追加一些東西到div容器(在底部)。 所以,我想:

$(document).on('blur','.importo',function(){ 
    $(this).parents().eq(2).append('<p>Qui le singole previsioni</p>'); 
}); 

但這將文本添加到所有父元素,直到第三級。 如何添加它只在div的底部? 另外,我是否應該使用.one僅觸發一次?我實際使用上,因爲用戶可以根據需要添加儘可能多的這些字段集併爲每個字段集我想火它只有一次

這裏是一個fiddle

回答

4

使用closest()而不是parents()

$(document).on('blur','.importo',function(){ 
    $(this).closest("div.sez-form").append('<p>Qui le singole previsioni</p>'); 
}); 
+0

看起來像一個笑話,但與此代碼我得到的輸入,並在三次後右側的文本appendend一次div底部 –

+0

@LelioFaieta做一件事,然後將'.append()'換成'.html()',最後換一個新的'div'。 ':)'問題解決了。 –

+0

已修復...已更改爲html並返回追加,現在它正在工作... :) –

3

使用closest()目標要附加的具體div至。試試這個:

$(document).on('blur','.importo',function(){ 
    $(this).closest('.sez-form').append('<p>Qui le singole previsioni</p>'); 
}); 

Working example