获取 div id 作为数组？

Question

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

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

Answer 1

可以使用jquery吗？这会容易得多 $('[data=divdata]') 你将得到一个数组，其中包含具有此属性的所有元素

Answer 2

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

Answer 3

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

Answer 4

映射和过滤方法。

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

Answer 5

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

所以，您可以使用：

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

而不是

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

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

获取 div id 作为数组？

Get divs id as array?

javascript

arrays

numbers

closest