获取id值，如果点击内部的span元素

Question

如果用户点击嵌套在pop-up-custom类中的<span>元素，则可以使用jQuery获得pop-up-custom的ID值，即ideation。

<div class="elementor-element pop-up-custom" id="ideation" data-widget_type="eael-lightbox.default">
<div class="elementor-widget-container">

<div data-lightbox-type="lightbox_type_custom_html" data-lightbox-type-url="" data-lightbox-trigger-pageload="1" data-lightbox-closebtn-color="#ffffff" class="eael-lightbox-wrapper" data-trigger="eael_lightbox_trigger_button" data-lightbox-id="lightbox_639c25cc43a03" data-type="inline" data-src="#eael-lightbox-window-639c25cc43a03" data-popup-layout="eael-lightbox-popup-standard" data-main-class="eael-lightbox-modal-popup-cf4e9a1" data-close_button="yes" data-esc_exit="yes" data-click_exit="yes" data-effect="animated " data-trigger-element=".eael-modal-popup-link-639c25cc43a03">
<div class="eael-lightbox-btn">
<span id="btn-eael-lightbox-639c25cc43a03" class="eael-modal-popup-button eael-modal-popup-link eael-modal-popup-link-639c25cc43a03 elementor-button elementor-size-md">Request</span></div><!-- close .eael-lightbox-btn -->
</div>
</div>

我要求这样的逻辑的原因是因为代码是由构建器生成的，我可以访问更改top元素的id和类，所以最终的目标是当用户单击<span>时，我想要获取top元素的id。

jQuery(".pop-up-custom > span").click(function() {
console.log(this.id);
});

Answer 1

$(".pop-up-custom span").click(function() {
console.log($(this).parents('.pop-up-custom').attr('id'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementor-element pop-up-custom" id="ideation" data-widget_type="eael-lightbox.default">
<div class="elementor-widget-container">
<div data-lightbox-type="lightbox_type_custom_html" data-lightbox-type-url="" data-lightbox-trigger-pageload="1" data-lightbox-closebtn-color="#ffffff" class="eael-lightbox-wrapper" data-trigger="eael_lightbox_trigger_button" data-lightbox-id="lightbox_639c25cc43a03" data-type="inline" data-src="#eael-lightbox-window-639c25cc43a03" data-popup-layout="eael-lightbox-popup-standard" data-main-class="eael-lightbox-modal-popup-cf4e9a1" data-close_button="yes" data-esc_exit="yes" data-click_exit="yes" data-effect="animated " data-trigger-element=".eael-modal-popup-link-639c25cc43a03">
<div class="eael-lightbox-btn">
<span id="btn-eael-lightbox-639c25cc43a03" class="eael-modal-popup-button eael-modal-popup-link eael-modal-popup-link-639c25cc43a03 elementor-button elementor-size-md">Request
</span>
</div><!-- close .eael-lightbox-btn -->
</div>
</div>
</div>

Answer 2

您可以使用$(this)将this转换为jQuery对象，以便您可以调用.closest()方法，该方法将遍历span的元素以查找具有pop-up-custom类的元素。然后可以使用attr('id')获取它的id。请看下面的例子:

jQuery(".pop-up-custom span").click(function() {
console.log($(this).closest(".pop-up-custom").attr('id'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementor-element pop-up-custom" id="ideation" data-widget_type="eael-lightbox.default">
<div class="elementor-widget-container">
<div data-lightbox-type="lightbox_type_custom_html" data-lightbox-type-url="" data-lightbox-trigger-pageload="1" data-lightbox-closebtn-color="#ffffff" class="eael-lightbox-wrapper" data-trigger="eael_lightbox_trigger_button" data-lightbox-id="lightbox_639c25cc43a03"
data-type="inline" data-src="#eael-lightbox-window-639c25cc43a03" data-popup-layout="eael-lightbox-popup-standard" data-main-class="eael-lightbox-modal-popup-cf4e9a1" data-close_button="yes" data-esc_exit="yes" data-click_exit="yes" data-effect="animated "
data-trigger-element=".eael-modal-popup-link-639c25cc43a03">
<div class="eael-lightbox-btn">
<span id="btn-eael-lightbox-639c25cc43a03" class="eael-modal-popup-button eael-modal-popup-link eael-modal-popup-link-639c25cc43a03 elementor-button elementor-size-md">Request</span>
</div> <!-- close .eael-lightbox-btn -->
</div>
</div>
</div>