jQueryがDOMをトラバースする - ボタンがクリックされたときにクラス別にアイテムを探す

Question

クローンを介して動的に挿入される行があるため、IDは表示されません。

システム確認ボタンに対応するシステム名の値を探しています。ここで

が関数である：ここでは

function getSystemInfo(btn){  
    var buttonClicked = $(btn); 
    var firstSystemName = buttonClicked.parent().next().find($("input.systemname")); 
    alert($(firstSystemName).val()); 
}    

は、生成されたソースコードである：

<div name="singleSystemDiv" class="offset-bg"> 
    <div class="field inline"> 
    <label class="frmFlds_labels">System Name</label> 
    <input name="systemname" class="systemname" size="15" value="d1cti1d4" type="text"> 
    </div> 
    <div class="field inline"> 
    <label class="frmFlds_labels">Location</label> 
     <select id="location" name="location"> 
      <option value=""></option> 
      <option value="Akron">Akron</option> 
      <option value="Allen">Allen DC - Mob</option> 
      <option value="Alpharetta">Alpharetta - Mob</option> 
     </select> 
    </div> 
    <div class="field inline"> 
    <label class="frmFlds_labels">Platform</label> 
     <select id="platform" name="platform" onChange="updateModels(this);" class="platform"> 
      <option value=""></option> 
      <option value="IBM" selected="selected">AIX</option> 
     </select> 
    </div> 
    <div class="buttons"> 
     <input value="Remove System" onClick="removeSystemRow(this);" type="button"> 
     <input value="Check System" onClick="getSystemInfo(this);" type="button"> 
    </div> 
</div> 

私はこの書かれている方法で、私の警告は未定義、焼成されます。

私は、横断に関して多くのSOの質問をしなければならないようです。誰かがこれを示すウェブサイトを持っているなら、それを投稿してください。 .next（）、parents（）などに関するjQueryのドキュメントは、私にとってそれをしていません。

function getSystemInfo(btn){  
    var buttonClicked = $(btn); 
    var $firstSystemName = buttonClicked.closest("div[name='singleSystemDiv']").find($("input.systemname")); 
    alert($firstSystemName.val()); 
} 

Example fiddle

また、あなたがbuttonClicked.parent().parent().find($("input.systemname"));を使用することができますが、私は個人的にparent()は少し醜い呼び出しをチェーン検索：

Answer 1

これを試してみてください。