在jquery中在同一个子节点和父节点之间切换

Question

我们如何从父母回复同一个孩子？我有如下情况：
的 HTML

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

javascript

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

HTML输出：

ChildA ChildB  

每当我点击 childA 时，它都会正确输出 abc ，但当我点击 childB 时，它会再次定位到第一个孩子并将其属性赋予 abc
有没有办法针对我点击的同一个孩子？

Answer 1

试试这个

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

Answer 2

您可以通过引用启动事件的DOM元素来执行此操作。

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

演示：Fiddle

---

event or e实际上是event object，保证传递给事件处理程序。原始事件中的大多数属性都会复制并标准化为新事件对象。

e.target是主要事件属性之一，它是为事件或其后代注册的元素。

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()返回一个包含两个元素的数组（ChildA和ChildB）

当你在该数组上调用一个方法时，它总是使用第一个元素（ChildA）

将click侦听器应用于这两个元素，并从您单击的对象（this）中获取该类，并且不要尝试通过父级和子级获取它。

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

Answer 6

在父项上绑定点击事件然后查找其子项的属性将为您提供与获取确切输出相同的结果，您可以比较类名或按ID进行比较。

试试这个

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