CODEWITHSUNDEEP
javascripthtmljquery
Sanad Cal
Sanad Cal

Reputation: 39

Get id value if click on span element inside

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

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);
});

Upvotes: 0

Views: 113

Answers (2)

Mitali Patel
Mitali Patel

Reputation: 427

$(".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>

Upvotes: 1

Nick Parsons
Nick Parsons

Reputation: 50684

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

Upvotes: 0

Related Questions