获取 div id 作为数组？

如何解决获取 div id 作为数组？

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

在这种情况下，基于数字 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);
     }

解决方法

如果你在循环之前缓存你的数字和元素，你可以简单地循环具有 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>

你能用jquery吗？会容易很多 $('[data=divdata]') 然后你会得到一个包含所有具有这个属性的元素的数组

使用 nextSibling 和 previousSibling 属性：

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

document.getElementById('2').nextSibling; // returns 3
document.getElementById('2').previousSibling; // returns 1

映射和过滤方法。

var number = document.getElementsByClassName("number")[0].getAttribute("data-num");
var itemsWithDivData = document.querySelectorAll('.divclass[data=divdata]');
var arrayOfDivDataIds = [...itemsWithDivData].map(item => parseInt(item.id)).filter(item => item > parseInt(number));
var nextItemId = arrayOfDivDataIds.sort(function(a,b){return a-b})[0];

console.log(nextItemId);

如果你想获取下一个属性为(data = "divdata")的div id

所以，你可以使用：

var next_num; 
  array1.find(ele =>{
    if(ele > number) {
      next_num = ele;   
    }
  })

代替

var next_num = array1.find(element => element > number);

然后你会得到你想要的 div id。