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>

按照我写的方式，我的警报正在触发，未定义。

我似乎不得不问很多关于遍历的问题。如果有人有一个网站可以演示这一点，请发布该网站。 jQuery 的有关 .next()、parents() 等的文档不适合我。

Answer 1

试试这个:

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() code> 调用起来有点难看。