Tengo el element dentro de esta estructura:
<div data-unit="5" data-id="0" id="unit-0" class="session-unit-container unit-columns"> <h1 class="unit-title">5</h1> <div class="session-unit"> <div id="element" class="session-card" draggable="false" style="">Item 5</div> // here is the element </div> </div> ¿Cómo puedo obtener la data-unit="5" del elemento principal cuando selecciono el element ?
No entiendo lo que quieres decir when I select the element . ¿Quieres decir cuando haces clic? ¿Cuándo mouse select ?
De todos modos, la forma de acceder al valor es la siguiente:
// Here I select the element I am interested for. let element = document.getElementById('element'); // Here I just console.log the value of the data-unit console.log(`Here Is The data-unit Value: ${element.parentNode.parentNode.dataset.unit}`); <div data-unit="5" data-id="0" id="unit-0" class="session-unit-container unit-columns"> <h1 class="unit-title">5</h1> <div class="session-unit"> <div id="element" class="session-card" draggable="false" style="">Item 5</div> // here is the element </div> </div>Suponiendo que tiene más de un contenedor que contiene tarjetas, puede adjuntar un oyente a cada contenedor y, si el elemento en el que hizo clic era una tarjeta, registrar el valor del atributo de datos.
(Nota: si tiene varios contenedores de tarjetas, no le dé a cada tarjeta la misma identificación).
// Cache the container elements const containers = document.querySelectorAll('.session-unit-container'); // Add listeners to them containers.forEach(container => { container.addEventListener('click', handleClick, false); }); function handleClick(e) { // Get the class list from the element that was clicked const { classList } = e.target; // If it's a card... if (classList.contains('session-card')) { // Locate the container element const parent = e.target.closest('.session-unit-container'); // And get its unit value from the dataset const { unit } = parent.dataset; console.log(unit); } } .session-card:hover { cursor: pointer; color: red; } <div data-unit="2" data-id="0" id="unit-0" class="session-unit-container unit-columns"> <h3 class="unit-title">2</h3> <div class="session-unit"> <div class="session-card" draggable="false" style="">Item 2</div> </div> </div> <div data-unit="5" data-id="0" id="unit-0" class="session-unit-container unit-columns"> <h3 class="unit-title">5</h3> <div class="session-unit"> <div class="session-card" draggable="false" style="">Item 5</div> </div> </div>Documentación adicional