如何使用javascript获取li的id值

Question

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 = /^(.+?)\n\t(.+)\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';
        }
      }
    }
  }
}

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

我尝试仅使用JavaScript而不使用jquery来获取数组“结果”中的data-id值的列表

示例：结果= 61825360、61824752、61826398

Answer 1

您要获取属性“ data-id”的值的方法？

Answer 2

使用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 3

尝试一下

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)