javascript - 使用 jquery 突出显示弹出窗口的第一个输入元素

Question

我有几个带有多个输入字段的弹出窗口。我想突出显示所有弹出窗口的 F​​IRSTinput 元素，并且我不想使用 id：

我的代码：

function initPopups(){
    $('*[id*=Popup]').each(function() {
        $(this).on({
                    // disables the auto close on outer clicks
            popupbeforeposition: function () {
                // removes all handlers from the 'background'(-layer.class) of the popup
                $('.ui-popup-screen').off();
            },
                    // SHOULD highlight the first textfield after popup opened
            popupafteropen:function(){
                console.log("OPENED");
                   $('form:first *:input[type!=hidden]:first').focus();
            }
        });
    });

这是一个弹出窗口的 html：

<div data-role="popup" id="create_stationPopup" class="ui-content">
            <a href="#" data-rel="back" data-role="button" data-theme="c" data-icon="delete" data-iconpos="notext"
               class="ui-btn-right">Close</a>
            <form>
            <input type="text" name="name" id="station_input_title" value="" data-mini="true" placeholder="Titel der Station" />
            <input type="text" name="name" id="station_input_number" value="" data-mini="true" placeholder="Nummer der Station"/>
            <textarea name="textarea" id="station_input_text" placeholder="Beschreibe diese Station"></textarea>
           </form>
            <a href="#create_stationQuestionPopup"  data-rel="popup" data-role="button" data-theme="c" id="createWave_questionBtn" >Frage
                hinzufügen</a>
            <a id="createWave_stationSaveBtn" data-role="button" data-theme="c">Station
                speichern</a>
        </div>

我的代码仅突出显示我的 HTML 文件中的第一个输入字段，而不是所有弹出窗口中的第一个输入字段（在静态 html 中）

Answer 1

在@Trufa 的帮助下，我通过以下方式修复了它：

function initPopups(){
    $('*[id*=Popup]').each(function() {
        $(this).on({
            popupbeforeposition: function () {
                // removes all handlers from the 'background'(-layer.class) of the popup
                $('.ui-popup-screen').off();

            },
            popupafteropen:function(){
                   $('.ui-popup-active *:input[type!=hidden]:first').focus();
              }
        });
    });
}

每个弹出窗口在屏幕上时都会获取该类.ui-popup-active，因此只需使用它并突出显示第一个输入字段:)

Answer 2

尝试使用在 jQuery元素[0]的“数组”中选择第一个元素：inputform

popupafteropen:function(){
    console.log("OPENED");
    $('div[data-role=popup] input[type!=hidden]')[0].focus();
}