如何使用javascript获取li的id值

Question

Javascript：

let BLACKLIST_TOPICS = [];
if (getCookie('topics')) {
BLACKLIST_TOPICS = (getCookie('topics')).split(',');
} 
const CONTENEUR_TOPICS = document.getElementsByClassName('topic-list topic-list-admin');
let TOPICS;
if (CONTENEUR_TOPICS.length > 0) {
TOPICS = CONTENEUR_TOPICS[0].children;
}
function blacklistTopic() {
for (let i = 1; i < 27; i++) {
if (i != 13 && TOPICS) {
const result = /^(.+?)nt(.+)t(.+)t(.+)t$/.exec(TOPICS[i].innerText);
for (let j = 0; j < BLACKLIST_TOPÏCS.length; j++){
if (result && result[2] == BLACKLIST_TOPICS[j]) {
topicBL.push(TOPICS[i]);
TOPICS[i].style.display = 'none';
}
}
}
}
}

Css：

< ul class="topic-list topic-list-admin">
< li class data-id="61825360"></li>
< li class data-id="61824752"></li>
< li class data-id="61826398"></li>
< /ul>

我尝试在数组"result"中获取数据 id 值的列表，仅使用 javascript，没有 jquery

例：

result= [61825360, 61824752, 61826398]

Answer 1

使用dataset属性获取data-XXX属性的值。您可以循环访问主题，获取每个主题的data-id。使用.map()在数组中返回它们。

const CONTENEUR_TOPICS = document.getElementsByClassName('topic-list topic-list-admin');
let TOPICS;
if (CONTENEUR_TOPICS.length > 0) {
TOPICS = CONTENEUR_TOPICS[0].children;
let result = blacklistTopic(TOPICS);
console.log(result);
}
function blacklistTopic(topics) {
return Array.from(topics).map(el => el.dataset.id);
}

<ul class="topic-list topic-list-admin">
<li class data-id="61825360"></li>
<li class data-id="61824752"></li>
<li class data-id="61826398"></li>
</ul>

Answer 2

试试这个

var lis = document.querySelectorAll('.topic-list li')
var result = []
for (let i = 0; i < lis.length; i++) {
result.push(result[i].getAttribute('data-id'))
}
console.log(result)