问题描述
如何根据数字(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。