Javascript 获取父元素

JS

   <script>           
        $('.btn').click(function(e){
           target = e.target;
           parent = target.parentNode.parentNode;
           console.log(parent);
        });
    </script>

$（'.btn'）。单击（函数（e）{
target=e.target；
父节点=target.parentNode.parentNode；
console.log（父级）；
});

HTML

 <div class="card" style="width: 18rem;">
    <div class="card-header">
        <div class="user-icon"></div>
        <h4 class="job-type">Painter</h4>

    </div>
    <div class="card-body">
        <p class="card-text"><strong>Job Description:</strong><span> Some quick example text to build on the card title and make up the bulk of the card's content.</span></p>
        <p class="card-text"><strong>Payment:</strong><span> $40</span></p>
        <p class="card-text"><strong>Location:</strong><span> 25 Apple str.</span></p>
    </div>
    <div class="card-body">
            <a class="btn btn-info btn-sm info" >
                <span class="glyphicon glyphicon-info-sign"></span> Info
            </a>
            <a href="#" class="btn btn-info btn-sm">
                Apply Now
            </a>
    </div>
</div>

画家
工作描述：一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分
付款：40美元

位置：25苹果街

我试图获取card元素及其子元素，但有时每当我单击按钮时，就会得到父元素的按钮

<div class="card-body">
            <a class="btn btn-info btn-sm info" >
                <span class="glyphicon glyphicon-info-sign"></span> Info
            </a>
            <a href="#" class="btn btn-info btn-sm">
                Apply Now
            </a>
    </div>

有时我会得到卡片元素 有人能给我解释一下为什么是[console image][1]

---

这是因为有时你可能会点击一个

字形图标

，而这个图标会成为你的

目标

，有时你点击文本，它的行为会超出你的预期

---

您可以使用expample

$（this）.closest（“.card”）

，而不是

target.parentNode.parentNode

，这是因为您可能有时会单击

字形图标，而该图标会成为您的
目标
，有时会单击文本，其行为会超出您的预期

您可以使用expample
$（this）.closest（“.card”）
，而不是
target.parentNode.parentNode
，因为您使用的是您单击的实际元素，在您的情况下，您可以单击
span
或
a

因此，当您使用类似于
e.target.parentNode
的内容时，您将获得该元素的父元素。span的
或
的
或
a的
。这就是为什么你可以得到不同的结果

或者，如果您使用了它，它将始终引用您附加侦听器的元素，在您的示例中是
方法或jQuery方法。其中一个将获取与传递的选择器匹配的最近的祖先元素

//either will get you the <div class="card"> element
let parent = e.target.closest('.card');
let parent = $(e.target).closest('.card');

//其中一个将为您获取元素
让父项=e.target.closest（'.card'）；
让父项=$（e.target）.closest（'.card'）；
因为您使用的是实际单击的元素，所以您可以单击
span
或
a

因此，当您使用类似于
e.target.parentNode
的内容时，您将获得该元素的父元素。span的
或
的
或
a的
。这就是为什么你可以得到不同的结果

或者，如果您使用了它，它将始终引用您附加侦听器的元素，在您的示例中是
方法或jQuery方法。其中一个将获取与传递的选择器匹配的最近的祖先元素

//either will get you the <div class="card"> element
let parent = e.target.closest('.card');
let parent = $(e.target).closest('.card');

//其中一个将为您获取元素
让父项=e.target.closest（'.card'）；
让父项=$（e.target）.closest（'.card'）；
在您的单击函数中只需执行
$（此）。最近的（.card”）
在您的单击函数中只需执行
$（此）。最近的（.card）