Найти элемент previoius с определенным классом

Question

У меня есть диалоговое окно jQuery, которое позволяет пользователям добавлять и удалять параметры для голосования (используя jQuery для обновления DOM). Каждый раз, когда добавляется вариант, вход и кнопка («Удалить») добавляется в диалоговом окно в следующем формате -

<div id="existing-options"> 
    <div class="dialog-option"> 
     <div class="dialog-right"> 
      <div class="remove_option button-secondary" id="remove_new_0">Delete</div> 
     </div> 
     <div class="dialog-left"> 
      <input type="text" value="1" class="option text ui-widget-content ui-corner-all" id="new_0" name="new_0"> 
     </div> 
    </div> 
</div> 

Я пытаюсь сделать так, что если пользователи нажимают ввести, когда они фокусируются на входе, событие click для его коррекции кнопки «Удалить» запускается.

Я провел некоторое исследование и .sibling() кажется неуместным. .prev() показался моим лучшим вариантом, но это не работает. Может кто-нибудь, пожалуйста, скажите мне, как лучше всего это сделать?

$(document).ready(function(){ 

    dialog_options_container = $('#existing-options'); // The container which holds the option inputs/buttons 

    /** Capture the 'enter' key when removing an option */ 
    dialog_options_container.bind('keyup', '.option', function(e){ 
     if(e.keyCode === 13){ 
     $(this).prev('.remove_option').click(); 
     return false; // Ignore the default event 
     } 
    }); 

}); 

Answer 1

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

t.dialog_options_container = $('#existing-options'); 
t.dialog_options_container.on('keyup', '.option', function(e){ 
    if(e.keyCode === 13) $(this).closest('.dialog-option').find('.remove_option').click(); 
    return false; 
}); 

Он использует .closest() для выбора .dialog-option, а затем .find() для поиска .remove_option.

Answer 2

Вы можете попробовать ориентируетесь кнопку на id специально (предполагают 0 в ваших приращений например, с каждой новой секции):

t.dialog_options_container.bind('keyup', '.option', function(e){ 
    if(e.keyCode === 13){ 
     var button_id = $(this).attr('id'); 
     $('#remove_' + button_id).trigger('click'); 
     return false; // Ignore the default event 
    } 
}); 

--edit-- попробовать это, чтобы получить правильный элемент ...

$('.dialog-left input[type="text"]').bind('keyup', function(e){ 
    if(e.keyCode === 13){ 
     var button_id = $(this).attr('id'); 
     $('#remove_' + button_id).trigger('click'); 
     return false; // Ignore the default event 
    } 
});