how to get parent div data-attribute javascript

Question

I have a HTML structure like this :

<div class="page" data-page-number="29" data-page-label="18" data-loaded="true" style="width: 816px; height: 1056px;">
   <div class="canvasWrapper" style="width: 816px; height: 1056px;">
      <canvas id="page29" width="1632" height="2112" style="width: 816px; height: 1056px;"></canvas>
   </div>
   <div class="textLayer" style="width: 816px; height: 1056px;">
        some content
   </div>
</div>

    <div class="page" data-page-number="29" data-page-label="18" data-loaded="true" style="width: 816px; height: 1056px;">
       <div class="canvasWrapper" style="width: 816px; height: 1056px;">
          <canvas id="page29" width="1632" height="2112" style="width: 816px; height: 1056px;"></canvas>
       </div>
       <div class="textLayer" style="width: 816px; height: 1056px;">
            some content
       </div>
    </div>

I want to know that when I click on any textLayer class, I will get data-page-number="x" attribute from its parent .page div.

Only javascript solution required here.

This is basically PDF.js structure.

If you're trying to avoid jQuery, you can check the marked answer in this thread: https://stackoverflow.com/questions/6856871/getting-the-parent-div-of-element — Thang Pham, Jul 07 '17 at 03:06

score 4 · Answer 1 · answered Jul 07 '17 at 04:08

You could use parentNode.dataset to retrieve data attribute of parent node.

var textLayer = document.querySelector('.textLayer');
textLayer.addEventListener('click', function(e) {
  console.log('page number: ' + e.target.parentNode.dataset.pageNumber);
  console.log('label: ' + e.target.parentNode.dataset.pageLabel);
  console.log('loaded: ' + e.target.parentNode.dataset.loaded);
});

<div class="page" data-page-number="29" data-page-label="18" data-loaded="true" style="width: 816px; height: 1056px;">
  <div class="canvasWrapper" style="width: 816px; height: 1056px;">
    <canvas id="page29" width="1632" height="2112" style="width: 816px; height: 1056px;"></canvas>
  </div>
  <div class="textLayer" style="width: 816px; height: 1056px;">
    some content
  </div>
</div>

querySelector only return the first matched element to receive all use querySelectorAll — nullqube, Jul 07 '17 at 04:54

nullqube · Answer 2 · 2017-07-07T05:17:17.837

0

$(".textLayer").on("click",function() {
   $(this).parent().attr("data-page-number");
});

pure js:

var classname = document.getElementsByClassName("textLayer");

var myFunction = function() {
    var attribute = this.parentElement.getAttribute("data-page-number");
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}

// even shorter version

var elems = document.getElementsByClassName("textLayer").forEach(function(element){ 
    element.addEventListener('click', function(){
        var attribute = this.parentElement.getAttribute("data-page-number");
    }, false);
});

edited Jul 07 '17 at 05:17

answered Jul 07 '17 at 03:04

nullqube

2,959
19
18

1

*"Unless another tag for a framework/library is also included, a pure JavaScript answer is expected"* (From the info that pops up when you hover over the "JavaScript" tag.) But if you're going to suggest a jQuery solution despite this you should at least say so explicitly in your answer. – nnnnnn Jul 07 '17 at 03:06

how to get parent div data-attribute javascript

2 Answers2

Linked