时间戳

首页 > 解决方案 > 获取 div id 作为数组？

javascript - 获取 div id 作为数组？

问题描述

如何根据数字 (data-num = "7") 获取下一个 div id 编号，但只能从具有属性的 div (data = "divdata") 中获取。一切正常，但我无法获得这些数字的数组。我的代码哪里错了？

在这种情况下，基于数字 7 的下一个数字应该是 9，而不是 8（因为它不包含属性 data="divdata"）

<div class="number" data-num="7"></div>

<div class="divclass" id="1" data="divdata"></div>
<div class="divclass" id="2"></div>
<div class="divclass" id="4" data="divdata"></div>
<div class="divclass" id="5" data="divdata"></div>
<div class="divclass" id="8"></div>
<div class="divclass" id="9" data="divdata"></div>
<div class="divclass" id="12" data="divdata"></div>


     var els = document.getElementsByClassName("divclass");
     for(var i = 0; i < els.length; i++){
     var num_min = document.querySelectorAll('.divclass[data=divdata]')[i].id;
     
     var num_min_array = num_min;
     
     var number = document.getElementsByClassName("number")[0].getAttribute("data-num");

     const array1 = [num_min_array];
     var next_num = array1.find(element => element > number);
     alert(next_num);
     }

标签： javascriptarraysnumbersclosest

解决方案

如果你在循环之前缓存你的数字和元素，你可以简单地循环遍历具有 divdata 的元素并将它们的 id 与数字匹配，一旦找到下一个数字就打破循环。

// Grab the number from the data attribute
const number = document.querySelector('.number').dataset.num;

// Grab all the datadiv elements
const divdatas = document.querySelectorAll('[data="divdata"]');

for (let i = 0; i < divdatas.length; i++) {

  // Coerce the strings to numbers
  const id = +divdatas[i].id;
  const last = +divdatas[divdatas.length - 1].id;
  const num = +number;

  // If the last id in the array matches the number
  // only log the second to last number
  if (last === num) {
    console.log(divdatas[divdatas.length - 2].id);
    break;
  }

  if (id > number) {
    console.log(divdatas[i - 1].id, divdatas[i].id);
    break;
  }

}
<div class="number" data-num="7"></div>

<div class="divclass" id="1" data="divdata"></div>
<div class="divclass" id="2"></div>
<div class="divclass" id="4" data="divdata"></div>
<div class="divclass" id="5" data="divdata"></div>
<div class="divclass" id="8"></div>
<div class="divclass" id="9" data="divdata"></div>
<div class="divclass" id="12" data="divdata"></div>

推荐阅读