我想獲取一系列數字之間的元素，讓我們從這些數字中獲取 10 到 15 之間的元素：
<div class="1">....</div>
<div class="2">....</div>
<div class="3">....</div>
...
...
...
<div class="20">....</div>
期望輸出：
<div class="10">....</div>
<div class="11">....</div>
<div class="12">....</div>
<div class="13">....</div>
<div class="14">....</div>
<div class="15">....</div>
uj5u.com熱心網友回復：
雖然 JS 解決方案可能更好，主要是因為它更靈活，但我想提一下 CSS 解決方案，盡管它有更多限制。
#parent {
display: inline-block;
}
div {
border: 1px solid #333;
padding: 5px;
}
div div {
width: 50px;
}
div:nth-child(n 10):nth-child(-n 15) { /* From the 10th child up to the 15th child */
background-color: green;
}<div id="parent">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
</div>通過組合兩個nth-child選擇器，您可以指定一系列元素。你也可以在 JS 中使用這個選擇器
document.querySelectorAll('div:nth-child(n 10):nth-child(-n 15)');
缺點是只有當所有元素都是兄弟元素并且是父元素的唯一子元素時，它才能很好地作業。
uj5u.com熱心網友回復：
只要使用slice就足夠了。
[...document.getElementsByTagName("div")].slice(10,5)
uj5u.com熱心網友回復：
[...document.querySelectorAll('div')]
.filter((e) => Number(e.classList.value) >= 10)
.filter((e) => Number(e.classList.value) <= 15)
.map((e) => console.log(e.outerHTML))
// <div class="10">....</div>
// <div class="11">....</div>
// <div class="12">....</div>
// <div class="13">....</div>
// <div class="14">....</div>
// <div class="15">....</div>
uj5u.com熱心網友回復：
以下示例僅適用于對類進行編號的這種特定情況。這不是一個常見的場景。大多數會使用唯一 ID，然后使用通用類進行分組。
$(function() {
function selectBetween(start, finish) {
var selects = [];
for (start; start <= finish; start ) {
selects.push("." start);
}
return $(selects.join(", "));
}
var myDivs = selectBetween(10, 15);
console.log(myDivs.length);
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">....</div>
<div class="2">....</div>
<div class="3">....</div>
<div class="4">....</div>
<div class="5">....</div>
<div class="6">....</div>
<div class="7">....</div>
<div class="8">....</div>
<div class="9">....</div>
<div class="10">....</div>
<div class="11">....</div>
<div class="12">....</div>
<div class="13">....</div>
<div class="14">....</div>
<div class="15">....</div>
<div class="16">....</div>
<div class="17">....</div>
<div class="18">....</div>
<div class="19">....</div>
<div class="20">....</div>控制臺將顯示6.
uj5u.com熱心網友回復：
只需映射所需元素的長度陣列，并使用getElementsByClassName方法來獲取范圍之間的所需元素。
const getElements = (min, max) => {
// construct an array of length of number of elements b/w min & max
// and then map the required elements with the className selector
return [...new Array((max - min) 1)]
.map((_, index) => document.getElementsByClassName(index min));
}
console.log(getElements(10, 15));<div class="0">0</div>
<div class="1">1</div>
<div class="2">2</div>
<div class="3">3</div>
<div class="4">4</div>
<div class="5">5</div>
<div class="6">6</div>
<div class="7">7</div>
<div class="8">8</div>
<div class="9">9</div>
<div class="10">10</div>
<div class="11">11</div>
<div class="12">12</div>
<div class="13">13</div>
<div class="14">14</div>
<div class="15">15</div>
<div class="16">16</div>
<div class="17">17</div>
<div class="18">18</div>
<div class="19">19</div>
<div class="20">20</div>uj5u.com熱心網友回復：
為了獲得所需的輸出，首先我將獲取頁面上的所有 div，將結果節點串列轉換為陣列，以便我可以應用陣列的過濾方法，然后我將使用過濾陣列的外部 HTML 填充另一個 div。
在這里，我創建了一個箭頭函式，它使用引數進行過濾以使過濾器可重用。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Div Elements from n number to n number</title>
<script>
window.onload = ()=>{
// get all divs on this page
let allDivs = document.querySelectorAll('div')
// arrow function to get required divs where
// start is int, stop is int and divs is nodelist
const getDivsBetween = (start, stop, divs)=>{
// convert nodelist to JavaScript array
let theDivs = Array.from(divs)
// filter the array
let retVal = theDivs.filter((element)=>{
// convert className to integer for checking
// whether className is between the values
let className = parseInt(element.className)
// return selected element
if (className >= start && className <=stop) return element
})
return retVal // return array containing filtered elements
}
// get required divs
let outPutDivs = getDivsBetween(10, 15, allDivs)
// get div where output will go
let theOutputDiv = document.getElementById('output')
// populate output div with filtered divs outer html
// to get required output
outPutDivs.map((element)=>{
let thisDiv = document.createElement('div')
thisDiv.append(element.outerHTML)
theOutputDiv.append(thisDiv)
})
}
</script>
</head>
<body>
<div>Here are original divs</div>
<div id="originals">
<div class="1">....</div>
<div class="2">....</div>
<div class="3">....</div>
<div class="4">....</div>
<div class="5">....</div>
<div class="6">....</div>
<div class="7">....</div>
<div class="8">....</div>
<div class="9">....</div>
<div class="10">....</div>
<div class="11">....</div>
<div class="12">....</div>
<div class="13">....</div>
<div class="14">....</div>
<div class="15">....</div>
<div class="16">....</div>
<div class="17">....</div>
<div class="18">....</div>
<div class="19">....</div>
<div class="20">....</div>
</div>
<hr>
<div>Here is required output</div>
<div id="output"></div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/377620.html
標籤：javascript html 查询 数组