How to grab elements by data-attribute with JavaScript / jQuery

Question

I want to grab the data-attribute value of two li elements. However, this does not work, because I don't seem to reference the right object ( el ) to grab them. The el is the currentTarget that holds the event listener.

Right now I grab them like this:

const refinementData = el.dataset.identifier

I need this data-attribute value ( data-identifier ) for a if-condition and iteration.

In first iteration this works fine and grabs the li elements.

In 2nd iteration it does not work because el also references other dom-elements (like eg a span ). It tries to find the data-attribute ( data-identifier ) on the span and returns undefined then.

I tried alternatives to el eg jQuery solutions like this:

const refinementData2 = $('.refinement-list[data-identifier]');

or normal JavaScript versions like these:

const refinementData2 = document.querySelector('.refinement-list');

This is the HTML / Twig file where I want to grab values from the two li items:

                <div class="refinement-options tag-options js-action-element">
                    <ul>
                        {% for refinement in concreteProduct.productOptions.refinements %}
                            {# create <li> with color of refinement key #}
                            {% if refinement.key != 'V00' %}<li class="refinement-list with-icon without-text svg-refinement {{refinement.key|lower}} {{refinement.key == pre_config_refinement ? 'active': ''}} option"
                            data-refinement="{{refinement.key}}" data-identifier="refinement"></li>{% endif %}
                        {% endfor %}

                        {% for tag in concreteProduct.productOptions.tags %}
                            {# create <li> with tag icon #}
                            {% if tag.key != 'T00' %}<li class="refinement-list with-icon without-text svg-tag {{tag.key|lower}} {{tag.key == pre_config_tag ? 'active': ''}} option" data-tag="{{tag.key}}" data-identifier="tag"></li>{% endif %}
                        {% endfor %}
                    </ul>
                </div>

Answer 1

I assume the reason why you cannot get the right object is because it is a list. You need to iterate.

And regarding the way you get this info with jQuery, one way is to use the data method. For data-identifier , you call .data('identifier') .

$('.refinement-list').each(function(){
  console.log( $(this).data('identifier') );
});

Answer 2

Try by giving li at first. This way, you can narrow it exactly to the el.

 $('li.refinement-list[data-identifier]')

DEMO

 $('li.refinement-list[data-identifier]').each(function(i, obj) { console.log(obj.innerHTML, $(obj).attr('data-identifier')); })

 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <div class="refinement-options tag-options js-action-element"> <ul> <li class="refinement-list with-icon without-text svg-refinement {{refinement.key|lower}} {{refinement.key == pre_config_refinement ? 'active': ''}} option" data-refinement="{{refinement.key}}" data-identifier="refinement">a</li> <li class="refinement-list with-icon without-text svg-tag {{tag.key|lower}} {{tag.key == pre_config_tag ? 'active': ''}} option" data-tag="{{tag.key}}" data-identifier="tag">b</li> </ul> </div>