时间戳

首页 > 解决方案 > 如何使用 JavaScript / jQuery 通过数据属性抓取元素

javascript - 如何使用 JavaScript / jQuery 通过数据属性抓取元素

问题描述

我想获取两个li元素的数据属性值。但是，这不起作用，因为我似乎没有引用正确的对象 ( el) 来获取它们。el是保存事件侦听器的 currentTarget 。

现在我像这样抓住它们：

const refinementData = el.dataset.identifier

我需要这个数据属性值 ( data-identifier) 用于 if 条件和迭代。

在第一次迭代中，这可以正常工作并抓取li元素。

在第二次迭代中它不起作用，因为el它还引用了其他 dom 元素（例如 a span）。它试图在 上找到数据属性 ( data-identifier)span并返回undefined。

我尝试了el像这样的 jQuery 解决方案的替代方案：

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

或像这样的普通 JavaScript 版本：

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

这是我想从这两个li项目中获取值的 HTML / Twig 文件：

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

标签： javascriptjqueryhtml

解决方案

尝试先给予li。这样，您可以将其精确缩小到 el。

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

演示

$('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>

推荐阅读