JQuery обход DOM - поиск элемента по классу при нажатии кнопки

Question

У меня нет идентификаторов для просмотра, поскольку некоторые строки вставляются динамически с помощью клона.

Я ищу значение системного имени, которое соответствует кнопке Проверить системунажата.

Вот функция:

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 (), родителей () и т. д., не делают этого для меня.

Answer 1

Попробуйте это:

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

Пример скрипта

В качестве альтернативы вы можете использовать buttonClicked.parent().parent().find($("input.systemname"));, но я лично нахожу прикованным parent() звонит немного некрасиво.