Jquery and html:: Getting the nearest data attribute

Question

Here is a similar piece of code I am working on right now:

<div class="gallery-category">
    <h2 data-gallery="Exterior">
        <span class="gallery-back"></span>
        Exterior
    </h2>
    <div class="gallery-items-wrap">
        <div class="gallery-image-tile">
            <div class="gallery-img" data-analytics="photo-click">
                <picture>
                    <source srcset="/content/image/image1.jpg">
                </picture>
            </div>
        </div>
    </div>
</div>

<div class="gallery-category">
    <h2 data-gallery="Interior">
        <span class="gallery-back"></span>
        Interior
    </h2>
    <div class="gallery-items-wrap">
        <div class="gallery-image-tile">
            <div class="gallery-img" data-analytics="photo-click">
                <picture>
                    <source srcset="/content/image/image2.jpg">
                </picture>
            </div>
        </div>
    </div>
</div>

I have to get the value Exterior if I click on the image image1.jpg. I created the data attribute data-gallery and was trying to get the value by using $('[data-gallery]').data("gallery") but getting only the first value.

What I need looks something like this :

Clicking on image1 getting the value 'Exterior'.

Clicking on image2 getting the value 'Interior'.

Thanks in advance

Answer 1

Yes you could by attaching the click to the class .gallery-img then after the click use the closest() method to go up to parents div and find the h2 element with data-gallery attribute :

$('.gallery-img picture').on('click',function(){
    $(this).closest('.gallery-category').find('h2[data-gallery]').data("gallery")
})

Hope this helps.

$('.gallery-img picture').on('click',function(){
  var gallery_data = $(this).closest('.gallery-category').find('h2[data-gallery]').data("gallery");
  
  console.log(gallery_data);
})

picture {
  width: 100px;
  height: 20px;
  border: 1px solid;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery-category">
  <h2 data-gallery="Exterior">
    <span class="gallery-back"></span>
    Exterior
  </h2>
  <div class="gallery-items-wrap">
    <div class="gallery-image-tile">
      <div class="gallery-img" data-analytics="photo-click">
        <picture>
          <source srcset="/content/image/image1.jpg">
        </picture>
      </div>
    </div>
  </div>
</div>

<div class="gallery-category">
  <h2 data-gallery="Interior">
    <span class="gallery-back"></span>
    Interior
  </h2>
  <div class="gallery-items-wrap">
    <div class="gallery-image-tile">
      <div class="gallery-img" data-analytics="photo-click">
        <picture>
          <source srcset="/content/image/image2.jpg">
        </picture>
      </div>
    </div>
  </div>
</div>