Переключение между тем же дочерним и родительским в jquery

Question

Как мы можем вызвать обратный вызов для того же самого ребенка из родителя? У меня есть сценарий, как указано ниже:
HTML

<div id="abc123"> 
<ul id="pqr"> 
    <span class="abc">ChildA</span> 
    <span class="xyz">ChildB</span> 
</ul> 

яваскрипта

$(document).ready(function() 
{ 
    $('.abc, .xyz').parent().click(function() 
    { 
     alert($(this).children().attr("class")); 
    }); 
}); 

HTML выход:

ChildA ChildB 

Всякий раз, когда я нажав на childâ это дает мне правильный вывод, как аЬс, но когда я нажав на childB снова нацеливания на 1 ребенка и давая его атрибут, как аЬс
Есть ли способ для таргетинга на тех же детей, к которым я нажал?

Answer 1

Вы можете это сделать, обращаясь к элементу DOM, который инициировал событие .:

$('.abc, .xyz').parent().click(function (e) { 
    alert($(e.target).attr("class")); 
}); 

Демо: Fiddle

---

event or e на самом деле event object и гарантированно передается обработчику событий. Большинство свойств исходного события копируются и нормализуются к новому объекту события.

e.target является одним из основных свойств события и является элементом, зарегистрированным для события или его потомком.

Answer 2

Попробуйте

$(document).ready(function() 
{ 
    $('.abc, .xyz').click(function() 
    { 
     alert($(this).attr("class")); 
    }); 
}); 

Answer 3

$(document).ready(function() 
{ 
    $('.abc, .xyz').parent().click(function(event) 
    { 
     alert(event.target.attr('class')); 
    }); 
}); 

Answer 4

Как насчет этого?

$("#pqr span").click(function() { 
    alert($(this).attr("class"); 
}); 

Answer 5

parent().children() возвращает массив с обоих элементов в нем (childâ и ChildB)

при вызове метода на этом массиве, он всегда использует первый элемент (childâ)

применить нажмите слушателя для обоих элементов и получить класс от объекта, который вы нажали (this), и не пытайтесь получить его через родителя и детей.

$(document).ready(function() 
{ 
    $('.abc, .xyz').click(function() 
    { 
     alert($(this).attr("class")); 
    }); 
}); 

Answer 6

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

Попробуйте

$(document).ready(function() 
{ 
    $('#pqr').find('span').click(function() 
    { 
     alert($(this).attr("class")); 
    }); 
});