Get id value if click on span element inside-CodePudding

It is possible with jQuery to get value of ID of pop-up-custom which is ideation if user click on <span> element which is nested inside pop-up-custom class ?

<div  id="ideation" data-widget_type="eael-lightbox.default">
<div >
                
<div data-lightbox-type="lightbox_type_custom_html" data-lightbox-type-url="" data-lightbox-trigger-pageload="1" data-lightbox-closebtn-color="#ffffff"  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- data-close_button="yes" data-esc_exit="yes" data-click_exit="yes" data-effect="animated " data-trigger-element=".eael-modal-popup-link-639c25cc43a03">
<div >
<span id="btn-eael-lightbox-639c25cc43a03" >Request</span></div><!-- close .eael-lightbox-btn -->
    </div>
</div>

Reason why I am asking for such logic is because code is getting generated by buider and I have access to change the id and class of top element, So ultimately goal is to when user click on <span> then I want to grab the id of top element.

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

CodePudding user response：

You can covert this into a jQuery object using $(this) so that you can then call the .closest() method which will traverse up the span's elements to find the element with pop-up-custom class. You can then grab its id using attr('id'). See example below:

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  id="ideation" data-widget_type="eael-lightbox.default">
  <div >
    <div data-lightbox-type="lightbox_type_custom_html" data-lightbox-type-url="" data-lightbox-trigger-pageload="1" data-lightbox-closebtn-color="#ffffff"  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- data-close_button="yes" data-esc_exit="yes" data-click_exit="yes" data-effect="animated "
      data-trigger-element=".eael-modal-popup-link-639c25cc43a03">
      <div >
        <span id="btn-eael-lightbox-639c25cc43a03" >Request</span>
      </div> <!-- close .eael-lightbox-btn -->
    </div>
  </div>
</div>

CodePudding user response：

$(".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  id="ideation" data-widget_type="eael-lightbox.default">
  <div >
    <div data-lightbox-type="lightbox_type_custom_html" data-lightbox-type-url="" data-lightbox-trigger-pageload="1" data-lightbox-closebtn-color="#ffffff"  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- data-close_button="yes" data-esc_exit="yes" data-click_exit="yes" data-effect="animated " data-trigger-element=".eael-modal-popup-link-639c25cc43a03">
     <div >
        <span id="btn-eael-lightbox-639c25cc43a03" >Request
        </span>
     </div><!-- close .eael-lightbox-btn -->
   </div>
</div>
</div>