Question

我一直试图编写一个能在这个元素中抓取类的函数

<li class="list-group-item" data-id="1023649435">

然后为其添加一个名为modify-margin

的类

我在编写js时仍然相对较新，不想在jQuery中编写它并只使用普通的vanilla（或ES6）。

我已经在我的功能上取得了一些进展但是我遇到了这个问题，其中有另一个列表项有类：

我不想影响那个，只有那些list-group-item

这里的解决方案是，如果元素有dataset id，那么只抓取那些，问题是我不知道如何抓取数据集。任何帮助将不胜感激。

这是我到目前为止所知道的，我知道这是相当基本的。感谢您提前获得帮助

  init() {
const elems = document.querySelectorAll('.list-group-item');
console.log('elems', elems);

} }

Answer 1

您可以使用Document＃querySelector / All通过查询中的括号使用data- *属性查找元素：

document.querySelector('[data-id="1023649435"]');

<强>演示：

＆＃13;

const el = document.querySelector('[data-id="1023649435"]');
el.classList.add('modify-margin');

＆＃13;

.modify-margin {
  color: red;
}

＆＃13;

<ul>
  <li class="list-group-item" data-id="1023649435">Demo</li>
</ul>

＆＃13;

Answer 2

Use getElementsByClassName if possible.

您当然可以使用querySelector/All重写以下代码段。

我简单地做了一件事，选择所有包含＆list; group-item＆＃39;类名，只有当它们具有data-id属性并且这个是正数时才过滤那些，然后用它们处理。

＆＃13;

Array.from(document.getElementsByClassName("list-group-item"))
  .filter(e => parseInt(e.dataset.id) > 0)
  .forEach(f => console.log(f.innerText)); 

/*
[].slice.call(document.getElementsByClassName("list-group-item")).filter(e => parseInt(e.dataset.id) > 0).forEach(f => console.log(f.innerText));
*/
/*
--- Or from your comment -))

Array.from(document.getElementsByClassName("list-group-item"))
  .filter(e => e.dataset.id.startsWith("1023"))
  .forEach(f => console.log(f.innerText)); 

*/

＆＃13;

<li class="list-group-item" data-id="1023649435">seven</li>
<li class="list-group-item" data-id="1073649435">november</li>
<li class="list-group-item" data-id="1070249435">nineteen</li>
<li class="list-group-item" data-id="1925494359">seventeen</li>
<li class="list-group-item" data-foo="foo">socialist</li>
<li class="list-group-item" data-bar="bar">revolution</li>

＆＃13;

es6 querySelectorAll一个类并获取它的数据属性

2 个答案: