javascript - 获取父元素

Question

JS

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

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>

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

<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>

有时我会得到卡片元素 有人可以向我解释一下为什么这是[控制台图片][1]

Answer 1

这是因为您有时可能单击字形，它就会成为您的目标，有时您单击文本，它会按照您的预期运行。

您可以使用 for example $(this).closest(".card") 而不是 target.parentNode.parentNode。