JQuery поиск не родительского элемента

Question

У меня есть страница, динамически созданная с помощью кнопок. Я хотел бы найти соответствующее значение data-ids кнопки, если я нажму ссылку li link или покажу? Я пробовал с ближайшим(), но безуспешно.

<div class=\"btn-group\"> 
    <button type=\"button\" class=\"btn dropdown-toggle actions\" data-ids=\"1\" data-toggle=\"dropdown\" aria-expanded=\"false\"> 
     <span class=\"glyphicon glyphicon-edit\"></span> 
    </button> 
    <ul class=\"dropdown-menu\" role=\"menu\"> 
     <li><a href=\"\" class="edit">Edit</a></li> 
     <li><a href=\"\" class="show">Show</a></li> 
    </ul> 
</div> 
<div class=\"btn-group\"> 
    <button type=\"button\" class=\"btn dropdown-toggle actions\" data-ids=\"2\" data-toggle=\"dropdown\" aria-expanded=\"false\"> 
     <span class=\"glyphicon glyphicon-edit\"></span> 
    </button> 
    <ul class=\"dropdown-menu\" role=\"menu\"> 
     <li><a href=\"\" class="edit">Edit</a></li> 
     <li><a href=\"\" class="show">Show</a></li> 
    </ul> 
</div> 
... 

JS

$('.edit').on('click', function(e) { 

    e.preventDefault(); 
    var ids = $(this).closest('button.actions').attr('data-ids'); 
}); 

Как я мог сделать, видно, что это не родительский элемент? Спасибо

Answer 1

Если элементы динамически добавлены, вам необходимо изменить использование делегированного обработчика событий, прикрепленного к не изменяющемуся элементу предка:

например.

$(document).on('click', '.edit', function(e) { 

Эта версия on применяется селектор JQuery (т.е. .edit) во время события и не тогда, когда событие было зарегистрировано. Это означает, что элементы должны существовать только тогда, когда клик появляется для его работы.

Другая проблема заключается в том, что элемент, который вы ищете, не является предком, поэтому вам нужно искать вверх, затем вниз по другой ветке.

например.

$(this).closest('.btn-group').find('button.actions') 

Который находит общий btn-group предка затем выполняет поиск вниз по кнопке действия.

JSFiddle:http://jsfiddle.net/TrueBlueAussie/uxtu6qm3/4/

Примечание: Очевидно, я должен был преобразовать буквального HTML в HTML для JSFiddle (т.е. удалить вытекание)

Answer 2

Найдите действительного родителя (btn-group) и используйте find(), чтобы получить желаемого ребенка.

var ids = $(this).closest('.btn-group') //common parent containing the desired element 
       .find('button.actions') //find the element 
       .data('ids'); 

data() instead of attr().

Кроме того, вы добавляете эту разметку динамически? Если нет, нет необходимости скрывать котировки \"\".

Если элементы добавлены динамически, вам необходимо использовать делегирование.

Event binding on dynamically created elements

Fiddle: http://jsfiddle.net/uxtu6qm3/3/

Answer 3

button.actions не родителем .edit, используйте

var ids = $(this).closest('ul').prev().attr('data-ids'); 

ИЛИ

var ids = $(this).closest('.btn-group').find('button.actions').attr('data-ids'); 

Answer 4

«.actions» не родительский элемент кнопки редактирования , Вам нужно получить общий родительский элемент обоих узлов, а затем найти.Действие элемента

var ids = $(this).closest(".btn-group").find('button.actions').attr('data-ids'); 

или

var ids = $(this).parent().prev().attr('data-ids'); 

Answer 5

Я считаю, что самый простой способ для достижения этой цели можно было бы добавить, что данные идентификаторы атрибутов в раскрывающемся меню UL, а также. Тогда вы можете использовать

$('.edit').on('click', function(e) { 
    e.preventDefault(); 
    var ids = $(e.target).parent().data('ids'); 
});